獲取可視區域高度賦值給div（解決document.body.clientHeight的返回值為0的問題）

本文轉載自查看原文 2017-12-04 14:50 2260 js

設置html,body{height:100%}

在使用html5文檔類型的時候，設置了html body的高度100%之后，兩個瀏覽器就都能獲取document.body.clientHeight了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>彈出層自定義（自動獲取高度）</title>
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .Load{width:100%; background-color: rgba(221,221,221,0.5);}
            .LoadDiv{margin: auto; text-align: center;vertical-align: middle;position: absolute;top: 50%; left: 50%;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                     window.onload = function () {
                         getHeight();//調用函數
                     };
                      function getHeight() {
                          var Load = document.getElementById('Load');//獲取Load的高度
                          var body_height = document.documentElement.clientHeight;//document.body.clientHeight中在<!DOCTYPE html>聲明下會返回0
                          alert(body_height);
                          Load.style.height = body_height + 'px';//將正文的高度賦值給Load
                      }
            });
            
        </script>
    </head>
    <body>
        <div class="Load" id="Load">
            <div class="LoadDiv">
                <img src="layer/theme/default/loading-0.gif"/>
            </div>
        </div>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 document.documentElement.clientHeight 和 $(window).height() 無法正確獲取頁面可視區高度 js獲取網頁屏幕可視區域高度 js獲取網頁屏幕可視區域高度 document.documentElement.clientHeight和document.body.clientHeight區別 JQuery獲取瀏覽器窗口的可視區域高度和寬度,滾動條高度 JQuery獲取瀏覽器窗口的可視區域高度和寬度,滾動條高度原生js獲取一個dom元素距離頁面可視區域的位置值 -- getBoundingClientRect js/jquery獲取瀏覽器窗口可視區域高度和寬度以及滾動條高度實現代碼 js獲取html元素在可視區域的位置獲取元素距離頁面可視區域的位置