在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识。(原文来自:博客园) 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性
offsetWidth | clientWidth | scrollWidth |
offsetHeight | clientHeight | scrollHeight |
offsetLeft | clientLeft | scrollLeft |
offsetTop | clientTop | scrollTop |
1. clientHeight和clientWidth用于描述元素内尺寸,是指 元素内容+内边距 大小,不包括边框(IE下实际包括)、外边距、滚动条部分 2. offsetHeight和offsetWidth用于描述元素外尺寸,是指 元素内容+内边距+边框,不包括外边距和滚动条部分 3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度 4. offsetTop和offsetLeft表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离 5. offsetParent对象是指元素最近的定位(relative,absolute)祖先元素,递归上溯,如果没有祖先元素是定位的话,会返回null写个小例子方便理解
<div id="divParent" style="padding: 8px; background-color: #aaa; position: relative;"> <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px; height: 200px; width: 200px; border: solid 3px #f00;"> </div> </div>
<script type="text/javascript"> var div = document.getElementById('divDisplay'); var clientHeight = div.clientHeight; var clientWidth = div.clientWidth; div.innerHTML += 'clientHeight: ' + clientHeight + '<br/>'; div.innerHTML += 'clientWidth: ' + clientWidth + '<br/>'; var clientLeft = div.clientLeft; var clientTop = div.clientTop; div.innerHTML += 'clientLeft: ' + clientLeft + '<br/>'; div.innerHTML += 'clientTop: ' + clientTop + '<br/>'; var offsetHeight = div.offsetHeight; var offsetWidth = div.offsetWidth; div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br/>'; div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br/>'; var offsetLeft = div.offsetLeft; var offsetTop = div.offsetTop; div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br/>'; div.innerHTML += 'offsetTop: ' + offsetTop + '<br/>'; var offsetParent = div.offsetParent; div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br/>'; </script>


6. scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等 7. scrollLeft和scrollTop是指元素滚动条位置,它们是可写的下面写个简单例子理解
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:auto;"> <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px; height: 400px; width: 200px; border: solid 3px #f00;"> </div> </div>
<script type="text/javascript"> var divP = document.getElementById('divParent'); var divD = document.getElementById('divDisplay'); var scrollHeight = divP.scrollHeight; var scrollWidth = divP.scrollWidth; divD.innerHTML += 'scrollHeight: ' + scrollHeight + '<br/>'; divD.innerHTML += 'scrollWidth: ' + scrollWidth + '<br/>'; </script>
function getScrollOffsets(w) { var w = w || window; if (w.pageXoffset != null) { return { x: w.pageXoffset, y: pageYoffset }; } var d = w.document; if (document.compatMode == "CSS1Compat") return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop }; return { x: d.body.scrollLeft, y: d.body.scrollTop }; }
function getViewPortSize(w) { var w = w || window; if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; if (document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; return { w: d.body.clientWidth, h: d.body.clientHeight }; }
function getElementPosition(e) { var x = 0, y = 0; while (e != null) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return { x: x, y: y }; }