javascript获得元素的尺寸和位置一

来源：http://www.cnblogs.com/rainman/archive/2009/02/15/1391056.html 在学习offset的相关属性前，必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值（例如，返回12，而不是'12px'）。 定位父元素：指在CSS中某一元素domElement[position:relative/absolute]所相对定位的元素。 1、offsetParent 　　 对于offsetParent来讲，最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。 　　 a、domElement设置了position:relative/absolute属性： 　　 　　 domElement.offsetParent指向的是该元素的定位父元素。 　　 　　 但也有一个bug，见一下代码： Code

Target
rainman

　　 b、domElement没有设置position:relative/absolute，即static： 　　 　　 这一点所有的浏览器基本相同，domElement的offsetParent指向的是离domElement最近的拥有position:relative/absolute属性的父级元素。若不存在，则指向 元素。但这种情况也有例外，如果domElement是

则 offsetparent 指向 　　 c、关于offsetParent的实例： Code

Target
rainman

Code Code

Target
rainman

2、offsetLeft/Top offsetLeft： 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离。 offsetTop：该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。 　　 代码： Code

Target
rainman

3、offsetWidth/offsetHeight 　　 给出元素在页面中占据的宽度和高度的总计。注意：把元素的边框和滚动条计算在内。 　　 offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width; 　　 offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width; 4、相关应用 a、获得一个元素的实际宽度和高度，例如：一个自适应高度的段落，往往可以通过获得该元素CSS层叠后的最终高度【见下代码】，但是这种方法在IE中有时返回的是auto，所以使用一个元素的offsetWidth/offsetHeight是比较理想的方法。 function getStyle(elem , type){ var typeface = ''; if(elem.currentStyle) typeface = elem.currentStyle[type]; else if(window.getComputedStyle) typeface = window.getComputedStyle(elem , null)[type]; return typeface; } 　　 获得一个元素位置的可移植的方法：在窗口中的位置 function getX(elem){ var x = 0; while(elem){ x = x + elem.offsetLeft; elem = elem.offsetParent; } return x; } function getY(elem){ var y = 0; while(elem){ y = y + elem.offsetTop; elem = elem.offsetParent; } return y; }