document.body.scrollWidth、document.documentElement.scrollWidth系列宽高值对比

来源：互联网发布：日本娱乐圈的黑暗知乎编辑：程序博客网时间：2024/06/06 02:35

最近深入研究了一下body.scrollWidth、document.documentElement.scrollWidth等等类似的一系列浏览器宽高的值，清晰总结了一下，还是通过代码的方式说明问题：

<!DOCTYPE html><html lang="en"><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 lang="en"><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>

阅读全文

0 0