height、clientHeight、scrollHeight、offsetHeight区别

最新推荐文章于 2023-07-06 11:49:23 发布

weixin_30341745

最新推荐文章于 2023-07-06 11:49:23 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzpin/p/3925131.html

本文介绍了网页中常用的尺寸相关属性，包括clientHeight、scrollHeight、offsetHeight等的区别与应用。通过JavaScript代码展示了如何获取这些属性的值，帮助读者理解网页布局与滚动的相关概念。

height、clientHeight、scrollHeight、offsetHeight区别

var s = "网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
</SCRIPT>

转载于:https://www.cnblogs.com/hzpin/p/3925131.html