（知识点）JS获取网页高度

时间：2023-03-09 15:03:10
（知识点）JS获取网页高度

网页可见区域的宽：document.body.clientWidth

网页可见区域的高：document.body.clientHeight

网页可见区域的宽：document.body.offsetWidth（包括边线的宽）

网页可见区域的高：document.body.offsetHeight（包括边线的高）

网页正文全文的宽：document.body.scrollHeight

网页正文全文的高：document.body.scrollWidth

网页被卷去的高：document.body.scrollTop（IE8以下无效）

网页被卷去的左：document.body.scrollLeft（IE8以下无效）

网页被卷去的高：document.documentElement.scrollTop（IE8以下有效）

网页被卷去的左：document.documentElement.scrollLeft（IE8以下有效）

网页正文部分上：window.screenTop

网页正文部分做：window.scrollLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区的高度：window.screen.availHeight

屏幕可用工作区的宽度：window.screen.availWidth

相对于窗口左上角的X：window.event.clientX

相对于窗口左上角的Y：window.event.clientY

相对于整个页面的X:window.event.X

相对于整个页面的Y：window.event.Y

这里注意：

2级Dom没有提供把窗口坐标转化为文档坐标的标准方法。在IE浏览器以外，使用window.pageXOffset和window.pageYoffset即可

function getInfo() {
            var s = "";
            s += " 网页可见区域宽：" + document.body.clientWidth;
            s += " 网页可见区域高：" + document.body.clientHeight;
            s += " 网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)";
            s += " 网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)";
            s += " 网页正文全文宽：" + document.body.scrollWidth;
            s += " 网页正文全文高：" + document.body.scrollHeight;
            s += " 网页被卷去的高(ff)：" + document.body.scrollTop;
            s += " 网页被卷去的高(ie)：" + document.documentElement.scrollTop;
            s += " 网页被卷去的左：" + document.body.scrollLeft;
            s += " 网页正文部分上：" + window.screenTop;
            s += " 网页正文部分左：" + window.screenLeft;
            s += " 屏幕分辨率的高：" + window.screen.height;
            s += " 屏幕分辨率的宽：" + window.screen.width;
            s += " 屏幕可用工作区高度：" + window.screen.availHeight;
            s += " 屏幕可用工作区宽度：" + window.screen.availWidth;
            s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";
            s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";
            console.log(s);
        }
        getInfo();

相关文章