javascript 盒子模型

标签：

oDiv.clientWidth---》width+左右padding
oDiv.clientHeight---》height+上下padding
oDiv.clientTop---》上边框的高度
oDiv.clientLeft---》左边框的宽度

oDiv.offsetWidth---》clientWidth+左右边框的宽度
oDiv.offsetHeight---》clientHeight+上下边框的高度
offsetLeft---》当前元素距离父级参照物的左偏移量(从最外面的边框开始算，也就是得到的值不包含我们的边框的宽度)
offsetTop---》 当前元素距离父级参照物的上偏移量(从最外面的边框开始算，也就是得到的值不包含我们的边框的宽度)

console.log(oDiv.scrollWidth);
console.log(oDiv.scrollHeight);
1)在没有内容溢出的情况下：
和我们的clientWidth/clientHeight值相等
2)在有内容溢出的情况下:
不管是否隐藏了溢出的内容(overflow: hidden)，我们的计算是这样处理的:
scrollWidth 约等于 实际内容的真实宽度(被内容撑开后的宽度)+左padding
scrollHeight 约等于 实际内容的真实高(被内容撑开后的高度)+上padding

console.log(document.documentElement.scrollHeight||document.body.scrollHeight);
在真实项目中我们通常用scrollHeight获取当前HTML页面的总高度(不管有几屏的内容我们都算上)


document.documentElement.clientHeight||document.body.clientHeight
只获取当前浏览器一屏的高度

先写document.documentElement在写document.body，这样就可以完全的兼容了

摘自“珠峰培训"

javascript 盒子模型

标签：

原文地址：http://www.cnblogs.com/zjx2011/p/4663056.html