使用JavaScript读取元素的CSS属性

因此，如果有一个css文件链接到如下网页：

<link href="style.css" rel="stylesheet" type="text/css">

我想读取某个属性，例如一个div有className='layout'，我想使用JavaScript读取这个属性的详细信息，我该怎么做

---

我搜索了很多，但几乎没有运气，请建议。

您有两个选择：

手动枚举和分析对象（不推荐，除非您希望获取由某个选择器定义的所有特定样式特性）

创建与选择器匹配的元素，并使用

getComputedStyle

或

currentStyle

（IE）方法获取属性值

在您的示例中，尝试使用

class=“layout”

获取div的特定属性（例如：

color

）：

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

.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;
}

---

只需使用jquery，实际上问题是，如果在文档中定义了属性，它就很容易工作。现在，即使使用jQuery，我也可以设置值，或者读取内联值，而不是外部css值。。。我只是想读取外部css文件的属性，该文件应用于文档中的某些元素。非常感谢，它在firefox中工作，但不知怎的，当使用chrome时，我得到了空值，chrome是否缺少一些内容？我很惊讶该函数在firefox中工作，因为我的函数包含了一个打字错误。现在修好了。Fiddle：事实上，我在测试时更正了它，所以它确实有效，但我在chrome中似乎无法获得相同的结果，这是一个大问题。@Johnydep chrome似乎不会应用样式属性，直到通过将元素添加到文档树来呈现该元素。我已经通过添加两行成功地测试了该功能，请参见“这是否也可以作为对的答案？”？

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;
}