當前位置:編程學習大全網 - 源碼下載 - 如何用javascript設置頁面的寬度自適應

如何用javascript設置頁面的寬度自適應

由於我平時是以c#開發為主,以下我就針對C#為例,對該功能的操作進行描述

新建壹個test.aspx空白頁面,如下:

從工具箱中拖動壹個div到新建的test的頁面,並將該div的id定義為“Div1",源碼為:<div id="Div1" runat="server"> </div>

定義javascript函數,源碼<script type="text/javascript"></script>,函數名可以自由定義 function resizeDiv(minusWidth, minusHeight) {}該函數包含兩個參數,壹個是寬度,壹個是高度,這2個是程序員自己定義的當該DIV顯示後屏幕至少應該剩余的寬度和高度分別為多少。如圖中紅色標註的框壹樣

函數體內的具體內容為:

var tb =document.getElementById ("Div1");//這裏是剛剛定義的div的ID

var ieWidth = parseInt(document.body.clientWidth.toString().replace("px", ""), 10) - minusWidth;

var tbWidth = parseInt(tb.style.width.toString().replace("px", ""), 10);

if (ieWidth != tbWidth)

tb.style.width = ieWidth + "px";

var ieHeight = parseInt(document.body.clientHeight.toString().replace("px", ""), 10) - minusHeight;

var tbHeight = parseInt(tb.style.height.toString().replace("px", ""), 10);

if (ieHeight != tbHeight)

tb.style.height = ieHeight + "px";

至此,函數已經定義完成,剩下的就是函數調用。 setInterval("resizeDiv(20,40);", 100);這裏頁面默認剩余的寬度是20px和40px。這句必不可少,千萬不要忘了在頁面增加調用該函數。頁面運行結果見圖二。

END

註意事項

新增的DIV定義的ID必須和 var tb =document.getElementById ("Div1");這個語句中的ID壹致

setInterval("resizeDiv(20,40);", 100);這個函數註意大小寫匹配,並且resizeDiv這個必須和定義的函數function resizeDiv保持壹致

  • 上一篇:後綴名被改,不知原來是什麽文件
  • 下一篇:憑證雲源代碼
  • copyright 2024編程學習大全網