JS實現(xiàn)DIV高度自適應(yīng)窗口示例

更新時間：2017年02月16日 14:07:54 作者：nlx0201

這篇文章主要介紹了JS實現(xiàn)DIV高度自適應(yīng)窗口的方法,結(jié)合完整實例形式分析了JS通過動態(tài)操作頁面元素屬性實現(xiàn)高度自適應(yīng)的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)DIV高度自適應(yīng)窗口。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
    *.
    {
      margin: 0;
      padding: 0;
    }
  </style>
  <script type="text/javascript">
    window.onload = windowHeight; //頁面載入完畢執(zhí)行函數(shù)
    function windowHeight() {
      var h = document.documentElement.clientHeight; //獲取當(dāng)前窗口可視操作區(qū)域高度
      var bodyHeight = document.getElementById("divContent"); //尋找ID為content的對象
      bodyHeight.style.height = (h - 25) + "px"; //你想要自適應(yīng)高度的對象
    }
    setInterval(windowHeight, 500)//每半秒執(zhí)行一次windowHeight函數(shù)
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <div id="divContent" style="background-color: Gray;border:1px solid blue;">Test</div>
  </form>
</body>
</html>

PS:高度自適應(yīng)應(yīng)用廣泛，本站的很多在線工具也使用了這一技巧，列舉如下幾個工具供大家參考：

JavaScript在線格式化工具(基于beautify.js插件)：
http://tools.jb51.net/code/js_beautify

在線顏色選擇器工具/RGB顏色查詢對照表：
http://tools.jb51.net/color/colorpicker

在線個人所得稅計算器：
http://tools.jb51.net/jisuanqi/tax_calc

宋詞在線查詢：
http://tools.jb51.net/bianmin/songci

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: