用JavaScript获取DOM元素位置和大小的方法

在一些复杂的页面中，经常使用JavaScript来处理一些DOM元素的动态效果。在这种情况下，我们经常会用到一些元素位置和大小的计算，浏览器的兼容性也是不可忽视的一部分。要想写出预期效果的JavaScript代码，需要了解一些基础知识。基本概念为了便于理解，我们需要理解几个基本概念。每个HTML元素都有以下属性：offsetwithtclientwidthscratchlwidthoffthethightclientscrolhlheightoffetleftlientscroll top要了解这些属性，我们需要知道HTML元素的实际内容可能比分配给容纳内容的框大，所以可能会出现滚动条，内容区域就是视口。当实际内容大于视口时，我们需要考虑元素的滚动条位置。1.clIEntHeight和clientWidth用于描述元素的内部维度，指元素内容的内部边距大小，不包括框架(实际包含在ie下)、外部边距和滚动条。2.offsetHeight和offsetWidth用于描述元素的外部维度，它是指元素内容的内部边距框架。不包括外部边距和滚动条部件3。clientTop和clientLeft返回内边距边缘和框架外边缘之间的水平和垂直距离，即左边框宽度4。offsetTop和offsetLeft表示元素左上角(边框外边缘)和定位父容器左上角(offsetParent对象)5之间的距离。offsetParent对象引用元素的最近的相对的、绝对的祖先元素，它递归地返回。如果没有定位祖先元素，Will将返回null，并编写一个小示例来帮助理解复制的代码。代码如下： div ID=' div parent ' style=' padding 3360 8px；背景-color : # AAA；相对位置：'div id=' div display ' style=' background-color : # 0f 0；margin: 30pxpadding: 10px高度： 200 px；宽度： 200 px；border:实心3px # f00'/div /div复制代码如下： script type=' text/JavaScript ' var div=document . getelementbyid(' div display ')；var client height=div . client height；var client width=div . client width；div . innerhtml=' client height : ' client height ' br/'；div . innerhtml=' client width : ' client width ' br/'；var client left=div . client left；var client top=div . client top；div . innerhtml=' client left : ' client left ' br/'；div . innerhtml=' client top : ' client top ' br/'；var offset heart=div . offset heart；var offsetwithts=div . offsetwithts；div . innerhtml=' offsethight : ' offsethight ' br/'；div . innerhtml=' offsetidth : ' offsetidth ' br/'；var offsetLeft=div.offsetLeftvar offset top=div . offset top；div . innerhtml=' offsetLeft : ' offsetLeft ' br/'；div . innerhtml=' offset top : ' offset top ' br/'；var offsetParent=div . offsetParent；div . innerhtml=' offset parent : ' offset parent . id ' br/'；/脚本效果如图。

从图中我们可以看到，clientHeight是div高度上下10px的填充，clientWidth是一样的，而clientLeft和ClientTop是div的左边框和上边框宽度。offsetHeight是clientHeight上方和下方下一个3px的边框宽度之和。OffsetWidth与offsetTop相同，offsetTop是div 30px的maggin offsetparent 8px的填充，offsetLeft与6相同。scrollWidth和scrollHeight，它们是内容区域加上内部边距加上元素的溢出大小。当内容刚好匹配内容区域而没有溢出时，这些属性等于clientWidth和clientHeight。7.scrollLeft和scrollTop是指元素的滚动条位置，它们是可写的。写一个简单的例子来理解复制的代码。代码如下： div ID=' div parent ' style=' background-color 3360 # AAA；padding:8pxborder:solid 7px # 000高度：200 px；宽度width:500px' overflow:auto'div id=' div display ' style=' background-color : # 0f 0；margin: 30pxpadding: 10px高度： 400 px；宽度： 200 px；border:实心3px # f00'/div /div复制代码如下： script type=' text/JavaScript ' vardivp=document . getelementbyid(' div parent ')；var divD=document . getelementbyid(' div display ')；var scroll height=divp . scroll height；var scrollWidth=divp . scrollWidth；divdd . innerhtml=' scrolheight : ' scrolheight ' br/'；divd . innerhtml=' scrollWidth : ' scrollWidth ' br/'；/script在FireFox和IE10下得到一个scrollHeight: 494的结果(下面IE10版本的盒子模型与W3C标准不一致，不讨论，下面会介绍兼容性问题)，而在Chrome和Safari下得到一个scrollHeight: 502的结果，差8px。根据可以简单推测是divParent的填充，我们来计算一下是否能看到他们的结果是怎么来的。首先，scrollHeight肯定包括divDisplay要求的400px的填充，上下10px，上下3px，上下30px的边框。这样，400 10*2 3*2 30*2=486和486 8=494，486 8 * 2=502才是真正的情况。在FireFox和IE10下，我们可以在不计算填充的情况下计算元素的位置和大小。相对于文档和视口的坐标，我们在计算一个DOM元素的位置，也就是坐标的时候，会涉及到两个坐标系，文档坐标和视口坐标。我们经常使用的文档是整个页面，不仅仅是窗口的可见部分，还有由于窗口大小的限制，滚动条出现的部分。它的左上角就是我们所说的相对于文档坐标的原点。视口是显示文档内容的浏览器的一部分，它不包括浏览器外壳(菜单、工具栏、状态栏等)。)，即当前窗口显示页面的部分，不包括滚动条。如果文档小于视口，则表示没有滚动，文档的左上角与视口的左上角相同。一般来说，要在两个坐标系之间切换，需要加减滚动偏移。为了在坐标系之间转换，我们需要确定浏览器窗口的滚动条位置。窗口对象的pageXoffset和pageYoffset提供这些值，IE 8和更早版本除外。还可以通过scrollLeft和scrollTop属性获取滚动条位置。在正常情况下，可以通过查询文档根节点(document.documentElement)来获取这些属性值，但是在怪异模式下，必须通过文档的正文进行查询。

复制代码如下：函数getscrolloffset(w){ var w=w | | window；if (w.pageXoffset！=null){ return { x : w . pagexoffset，y : pageYoffset }；} var d=w.documentif(document.compat mode==' css1 compat ')返回{ x :d . document element . scroll left，y :d . document element . scroll top }；返回{ x: d.body.scrollLeft，y :d . body . scroll top }；}有时候能够判断视口的大小是非常有用的。复制代码如下：函数getviewportsize(w){ var w=w | | window；if (w.innerWidth！=null)返回{ w: w.innerWidth，h : w . inner height }；var d=w.documentif(document.compat mode==' css1 compat ')返回{ w :d . document element . client width，h :d . document element . client height }；返回{ w: d.body.clientWidth，h :d . body . client height }；}文档坐标任何HTML元素都有offectLeft和offectTop属性来返回元素的X和Y坐标。对于许多元素，这些值是文档坐标，但是对于定位元素和一些其他元素(表格单元格)的后代，返回相对于祖先的坐标。我们可以通过简单的递归追溯累加计算复制代码如下：函数getelementposition (e) {var x=0，y=0；while (e！=null){ x=e . offsetleft；y=e，offsetTope=e.offsetParent}返回{ x: x，y :y }；}但是，该函数并不总是计算正确的值。当文档包含滚动条时，此方法无法正常工作。我们只能在没有滚动条的情况下使用这个方法，但是我们使用这个原理来计算一些元素相对于父元素的坐标。视口坐标通过调用元素的getBoundingClientRect方法计算视口坐标相对简单。方法返回一个具有左、右、上和下属性的对象，这些属性分别表示元素相对于视口的四个位置的坐标。getBoundingClientRect返回的坐标指向元素的内部边距和边框，但不包含外部边距。兼容性很好，用上面的元素大小计算坐标的方法非常容易，所以我们很容易得到元素大小。在符合W3C标准的浏览器中，getBoundingClientRect返回的对象还包括宽度和高度，这在原来的IE中是没有实现的，但是通过返回对象的左右和上下可以很容易地计算出来。