使用JavaScript读取元素的CSS属性

使用JavaScript读取元素的CSS属性

您有两种选择：

1. 手动枚举和解析

   document.styleSheets

   对象（不建议使用，除非您要获取由某个选择器定义的所有特定样式属性）。
2. 创建与选择器匹配的元素，然后使用

   getComputedStyle

   或

   currentStyle

   （IE）方法获取属性值。

在你的榜样，试图得到一定的属性（比如说：

color

）有一个div

：

function getStyleProp(elem, prop){    if(window.getComputedStyle)        return window.getComputedStyle(elem, null).getPropertyValue(prop);    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE}window.onload = function(){    var d = document.createElement("div"); //Create div    d.className = "layout";     //Set class = "layout"    alert(getStyleProp(d, "color"));       //Get property value}

关于您的问题的评论 ，另一个函数：
下面的函数将忽略当前元素的内联样式定义。如果您想知道从样式表继承的样式定义（不包含父元素的继承样式定义），请遍历树并临时擦除

.cssText

属性，如以下功能所示：

function getNonInlineStyle(elem, prop){    var style = elem.cssText; //Cache the inline style    elem.cssText = "";        //Remove all inline styles    var inheritedPropValue = getStyle(elem, prop); //Get inherited value    elem.cssText = style;     //Add the inline style back    return inheritedPropValue;}