天天看點
傳回

document.body.scrollWidth、document.documentElement.scrollWidth系列寬高值對比

最近深入研究了一下body.scrollWidth、document.documentElement.scrollWidth等等類似的一系列浏覽器寬高的值，清晰總結了一下，還是通過代碼的方式說明問題：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{border: 10px solid red;margin: 0;padding: 0;}
        #one{  min-width: 900px;}
        #one div{  border: 1px solid red ;margin-left: 20px;background-color: yellow;width: 300px;height:400px;;display: inline-block}
    </style>
</head>
<body>
<div id="one">
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
    <div>fdsagfdgsdf</div>
</div>
<script>
    console.log(screen.width);          //即是window.screen.width，電腦螢幕的寬度，僅與電腦螢幕大小有關，與其他無關
    console.log(screen.height);         //即是window.screen.height，電腦螢幕的高度，僅與電腦螢幕大小有關，與其他無關
    console.log(window.screen.availWidth);   //電腦螢幕寬度（screen.width）中可用于顯示浏覽器的最大寬度(這裡考慮減去電腦螢幕下方工具欄的寬度)
    console.log(window.screen.availHeight);  //電腦螢幕高度中可用于顯示浏覽器的最大高度
    console.log(window.screenTop);      //浏覽器視窗距離電腦螢幕上邊界的距離
    console.log(window.screenLeft);     //浏覽器視窗距離電腦螢幕左邊界的距離
    console.log("---------------------------------------------------------------------------------------------------------------------------");
    console.log(window.innerWidth);     //網頁正文的内部寬度，即網頁正文的可視寬度，即在浏覽器上能看見的部分的寬度，如果該可視區域包含了滾動條（這裡不是說滾動條可以滑動網頁的寬度，而是單純滾動條這個元件的寬度），該寬度就是可視頁面加上滾動條元件的寬度
    console.log(window.innerHeight);    //網頁正文的内部高度，即網頁正文的可視高度，即在浏覽器上能看見的部分的高度，滾動條處同理。
    console.log(window.outerWidth);     //浏覽器視窗的外部寬度
    console.log(window.outerHeight);    //浏覽器視窗的外部高度
    console.log("---------------------------------------------------------------------------------------------------------------------------");
    console.log(window.pageYOffset);   //需要網頁存在滾動條才可以，存在豎向滾動條時，網頁正文向下滾動一段距離n px，該值即為n
    console.log(window.pageXOffset);   //同理，無滾動條值為0，存在橫向滾動條時，網頁正文(注意是正文，不是滾動條)向右滾動一段距離n px，該值即為n
    console.log(document.body.scrollTop);    //與上一對值相同（滾動條位置）
    console.log(document.body.scrollLeft);
    console.log(document.documentElement.scrollTop);  //與上一對值相同（與上一對都是獲得滾動條位置，但是存在相容問題，具體與html檔案頭的<DOCTYPE ...>有關，上一對值為0的時候這一對顯示正常，這一對為0的時候上一對值顯示正常）
    console.log(document.documentElement.scrollLeft);
    console.log("---------------------------------------------------------------------------------------------------------------------------");
    console.log(document.documentElement.scrollWidth);   //整個網頁的寬度，即整個給使用者觀看的網頁部分的寬度（無橫向滾動條時即為網頁寬度，有滾動條則加上滾動條可以滾動部分網頁的寬度）
    console.log(document.documentElement.scrollHeight);  //整個網頁的高度(如果有body{border:10px solid red;}，該邊界寬也算進去)
    console.log(document.body.scrollWidth);     //與上一對值相同
    console.log(document.body.scrollHeight);
    console.log("---------------------------------------------------------------------------------------------------------------------------");
    console.log(document.documentElement.offsetWidth);  //可視區域的寬度，但是不包含滾動條元件的十幾px像素，同document.documentElement.clientWidth(如果有body{border:10px solid red;}，該邊界寬也算進去)
    console.log(document.documentElement.offsetHeight); //整個網頁的高度,同document.body.scrollHeight(如果有body{border:10px solid red;}，該邊界寬也算進去)
    console.log(document.body.offsetWidth);       //與上一對值相同
    console.log(document.body.offsetHeight);
    console.log("---------------------------------------------------------------------------------------------------------------------------");
    console.log(document.documentElement.clientWidth);  //頁面可視寬度，但是不包含滾動條元件的十幾px像素(如果有body{border:10px solid red;}，該邊界寬也算進去)
    console.log(document.documentElement.clientHeight); //可視區域高度，document.documentElement 實際上就是 <html> 元素,隻不過顯示的是可見的部分，即浏覽器視窗大小（網頁無滾動條時與window.innerHeight同值）
    console.log(document.body.clientWidth);         //與上一對值意義完全不同，這是body的寬度，即審查元素時body元素的寬度，但是不包含邊線，例如body{border:10px solid red;}，這邊界的寬度是不會算在裡面的
    console.log(document.body.clientHeight);       //body的高度,即審查元素時body元素的寬度（理同）
</script>
</body>
</html>

這其中要注意的一點是document.documentElement.***和document.body.***之間的差別，一定要做好差別，前者是對标準模式下的IE和其他浏覽器而言，後者是對于怪異模式下的浏覽器而言的。這裡有一個相容性良好的例子——檢測網頁滾動到底部的計算：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>滾動到網頁底部判斷</title>
</head>
<body>
<div id="main">
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p>
    <p>1111111111111111</p><p>1111111111111111</p><p>1111111111111111</p><p>2222222222222222222222222222222222222222</p>
</div>
<script>
    window.onscroll = function() {
        console.log(h+" "+yy().y+" "+yy().yscroll);
        if(yy().y + yy().yscroll == h){
            console.log('滾動到網頁工底部啦！！！！！！！！！！！！！');
        }
    };
    /*查詢視窗視口尺寸 和 滾動條滾動位置*/
    var yy = function(){
        /*除了IE8以及更早的版本以外，其他浏覽器都能用*/
        if(window.innerWidth != null){
            return {
                y:window.innerHeight,
                yscroll:window.pageYOffset
            }
        }
        var d = window.document;
        /*對标準模式下的IE（或者任何浏覽器）*/
        if(document.compatMode == 'CSS1Compat'){
            return {
                y:d.documentElement.clientHeight,
                yscroll:d.documentElement.scrollTop
            }
        }else{
            /*對怪異模式下的浏覽器*/
            return {
                y:d.body.clientHeight,
                yscroll:d.body.scrollTop
            }
        }
    };
    /*獲得整個文檔高度（可視與不可視高度之和）*/
    var h = (function(){
        var d = window.document;
        if(document.compatMode == 'CSS1Compat'){
            return document.documentElement.offsetHeight;
        }else {
            return d.body.offsetHeight;
        }
    }());
</script>
</body>
</html>
JavaScript篇 javascript
上一篇: 李少白講攝影——不放過一切光線
下一篇: C和C++程式員面試秘笈①

繼續閱讀