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

我第一次在一个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>


你可能感兴趣的:(js,offsetheight,clientheight,scrollHeight)