浅谈clientHeight、offsetHeight、scrollHeight的联系与区别

最新推荐文章于 2020-07-27 03:00:13 发布

冷血有情556

最新推荐文章于 2020-07-27 03:00:13 发布

阅读量584

点赞数

分类专栏： Java Web 文章标签： js clientHeight offsetHeight scrollHeight

本文链接：https://blog.csdn.net/liu_005/article/details/46928821

版权

Java Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

我第一次在一个js中看到这三个属性的时候，也是不懂他们之间的区别。查阅了很多资料，不同的人对于这三个属性的说法不太一致，这导致了我对它们的认识更加模糊。这里，我通过一段代码来跟大家共同探讨一下这三个属性在不同浏览器上的差别，同时，也希望大家在使用这三个属性的时候要充分考虑它们在不同浏览器上的不同解释。

以下是对这三个属性测试的代码，你可以复制到编译器中，然后在不同的浏览器上测试。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<script type="text/javascript">

var ch=document.documentElement.clientHeight;
var cw=document.documentElement.clientWidth;
document.write("这是clientHeight： "+ch);
document.write("<br><br>");
document.write("这是clientWidth： "+cw);
document.write("<br><br>");
document.write("<br><br>");

var oh=document.documentElement.offsetHeight;
var ow=document.documentElement.offsetWidth;
document.write("这是offsetHeight： "+oh);
document.write("<br><br>");
document.write("这是offsetWidth： "+ow);
document.write("<br><br>");
document.write("<br><br>");

var sh=document.documentElement.scrollHeight;
var sw=document.documentElement.scrollWidth;
document.write("这是scrollHeight： "+sh);
document.write("<br><br>");
document.write("这是scrollWidth： "+sw);
</script>
</head>

<body>
</body>
</html>