html==========
<body>
<p id="p1">12312312123121231212312<br>1231212<br>31212312123121<br><br>2312123121231<br><br><br>21231212<br><br>312123<br><br>1212312123121231212312123<br><br><br><br></p>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
css================
#p1{overflow:scroll;width: 100px;height: 100px;border: 1px solid #000;}
js======================
var p=document.getElementById('p1');
alert(p.clientHeight); //86
alert(p.scrollHeight); //276
alert(document.body.clientHeight); //1390
alert(document.body.scrollHeight); //1410
为什么p.clientHeight不能取到滚动条之后的高度,document.body.clientHeight可以取到滚动条之后的高度?
document.body、document.documentElement和window获取视窗大小的区别 client*是获取对象的可视大小,返回的值不包括滚动条的大小,也不包括边框
p.clientHeight取到的是p可视内容的高度。
document.body.clientHeight取到的是body对象高度。
其实是这样的,你的body并没有设置overflow 所以它的client的高看起来就像你说的包含滚动条的高。即使给body设置了overflow,也会应用到html上,详情请看 http://blog.aijc.net/css/2014/08/11/CSS%20%E5%8F%AF%E8%A7%86%E5%8C%96%... 中的overflow。你取html的clientHeight就是不包含滚动条的了。