Fork me on GitHub
代码改变世界

元素的各种宽高

2015-10-25 18:09  autrol  阅读(552)  评论(0)  编辑  收藏  举报

知道元素的各种宽高非常重要，下面举一个例子说明含义：

<body style="margin: 10px;padding: 10px;">
<div style="border:1px solid red;">
<div style="width: 100px;height: 100px;background: #f00;border: 10px solid #00f;padding: 10px;margin: 10px;overflow: scroll;" id="test">
    <div style="width:200px;height:200px;background:#0f0;"></div>
</div>
</div>
</body>

<script type="text/javascript">
var test = document.getElementById('test');
console.log("自身高度：", test.style.height);  //100px
console.log("自身高度 + padding，但不包含滚动条：", test.clientHeight); //103
console.log("自身高度 + padding + border：", test.offsetHeight);   //140
console.log("内容高度 + padding：", test.scrollHeight);  //Chrome:220  IE/Firefox:210

console.log("自身宽度：", test.style.width);  //100px
console.log("自身宽度 + padding，但不包含滚动条：", test.clientWidth); //103
console.log("自身宽度 + padding + border：", test.offsetWidth);   //140
console.log("内容宽度 + padding：", test.scrollWidth);  //210

console.log("offsetLeft", test.offsetLeft);  //31，相对于document左边的边距，不存在offsetRight
console.log("offsetTop", test.offsetTop);    //31，相对于document顶部的边距，不存在offsetBottom

console.log("scrollLeft", test.scrollLeft);  //0，x方向滚动的距离，不存在scrollRight
console.log("scrollTop", test.scrollTop);    //0，y方向滚动的距离，不存在scrollBottom
</script>

效果：

虽然test.scrollHeight的值在不同浏览器中不同，但是计算的方法还是"内容高度 + padding"；因为在Chrome浏览器下，padding-bottom被渲染出来，所以结果是220。

下面我们对一些特殊的宽高值进行介绍。

浏览器可见区域的宽高

//Firefox浏览器、Chrome浏览器、IE浏览器可视区域宽高
document.documentElement.clientHeight
document.documentElement.clientWidth

浏览器滚动距离

//Chrome的滚动距离
document.body.scrollTop
document.body.scrollLeft
//IE/Firefox的滚动距离
document.documentElement.scrollTop
document.documentElement.scrollLeft

 

此处要做兼容性处理，听说与doctype有关系。

document.body表示body标签，document.documentElement表示根节点，也就是html标签。