javascript --获取css样式最终的属性值

 

创建动态效果又三个至关重要的元素：位置，尺寸，可见性。

使用这三个元素可以模拟现代浏览器上绝大部分的动态交互效果了。

一，元素的位置

元素位置的不同取决于它的css设置，同时也会受到与他密切相关的其他内容的影响。访问元素css属性或者最终的真实值并不能提供他相对于页面或者其他元素的精确位置。

1，获取相对于页面的位置。

offsetParent.这是元素的父元素，元素相对于它定位。但是在实际中，offsetParent所指向的元素取决于他的浏览器(firefox指向根节点,opera就是元素的直接父亲)

offsetLeft offsetTop 这两个属性分别是元素在offsetParent上下文中的水平和垂直偏移量。

现在的问题是找一个跨浏览器的方法，如下：

两个确定元素相对于整个文档的x和y位置的辅助函数

//获取元素x位置

function pageX(elem){ return elem.offsetParent?elem.offsetLeft+pageX(elem.offsetParent):elem.offsetLeft;}

//获取元素y位置

function pageY(elem){ return elem.offsetParent?elem.offsetRight+pageY(elem.offsetParent):elem.offsetRight;}

接下来的难题是找出元素相对于它的父亲的水平和垂直位置。需要注意的是，简单使用元素的style.left或者style.top并不够，因为需要处理

的元素可能尚未经过js或者css的样式化。

使用元素相对于其父亲的位置，就可以为dom增加额外的元素，并相对定位于他的父亲。例如，他对制作上下文工具条提示非常有用。

要找到元素相对于它的父亲元素的位置，必须再次使用offsetParetn属性。因为该属性并不保证能够返回指定元素的真实父亲，必须使用pageX和pageY函数来找出父亲元素和子元素之间的差距。

确定元素相对于父亲元素位置的两个函数

function parentX(elem){ return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageY(elem.parentNode);}function parentY(elem){ return elem.parentNode==elem.offsetParent?elem.offSetTop:pageY(elem)-pageY(elem.parentNode);}

关于元素位置的最后一个难题是：获取元素相对于它的css容器的位置。

如前所述，即使元素包含在一个元素内，但可以相对于其他的父亲元素而定位（使用相对和绝对定位）。记住这点，就可以求助getStyle函数得到css偏移的最终值，这等元元素的位置值。

获取元素css位置的辅助函数

这两个函数取掉了干扰性的信息比如单位。

 function posX(elem){ return parseInt(getStyle(elem,"left"));}function posY(elem){ return parseInt(getStyle(elem,"top"));}