元素的各种宽高
2015-10-25 18:09 autrol 阅读(553) 评论(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标签。
