JS获取元素CSS值

时间：2024-01-14 17:42:08

一、getComputedStyle

　　getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。

　　语法如下：

var style = window.getComputedStyle("元素", "伪类");

//例

var dom = document.getElementById("test");

var style = window.getComputedStyle(dom , ":after");

//获取属性可以用 getPropertyValue (不驼峰 IE9+)，getAttribute(驼峰)

style.getAttribute("backgroundColor");

style.getPropertyValue("border-top-left-radius");

　　Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null）;

　　

　　getComputedStyle IE6~8是不支持的。

　　IE可以用CurrentStyle，它是IE浏览器自娱自乐的一个属性

　　例如，我们要获取一个元素的高度，可以类似下面的代码：

alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);

　　

二、style

　　element.style 可读可写。

　　getComputedStyle 方法获取的是最终应用在元素上的所有CSS属性对象（包括默认），而element.style只能获取元素style属性中的CSS样式。

三、getBoundingClientRect()

　　

var box=document.getElementById('box');         // 获取元素

alert(box.getBoundingClientRect().top);         // 元素上边距离页面上边的距离

　　IE8一下只有上下左右可获取到，默认坐标从(2,2)开始计算，

var right =  box.getBoundingClientRect().right;

var left = box.getBoundingClientRect().left;

var width = right-left;

相关文章