获取DOM元素的所有CSS样式（类似于Firebug）

Question

对于一个DOM元素，如何获取特定元素在css中指定的所有样式？是要遍历所有css样式名称吗？

还是有更优雅的方法？Firebug是如何做到这一点的？

谢谢。

- Richard H

Answer 1

你应该可以使用getComputedStyle来获取它：

var css = window.getComputedStyle(element);
for (var i=0; i<css.length; i++) {
    console.log(css[i] +'='+css.getPropertyValue(""+css[i]))
}

然而，此方法返回计算后的样式，这意味着它将执行某些计算并将您的值转换为像素(px)。例如，如果您有一个行高为1.2，则它将被返回为57.6px而不是1.2

- NoBugs

---

这很棒，因为它还显示了不同CSS类应用于元素的样式（不仅是内联样式）。 如果您想要特定的CSS元素，可以使用： window.getComputedStyle(element).getPropertyValue('font-size') - Shahar

Answer 2

之前的解决方案在扩展之前修改样式，导致样式混乱。此外，您还会得到很多默认样式。

我的解决方案是剥离默认样式，并保留元素级联样式。

在控制台中运行，并从“元素”视图中复制所需元素。（已在Chrome中测试）

function setStyle(theElement) {
    var els = theElement.children;
    for(var i = 0, maxi = els.length; i < maxi; i++)
    {
        setStyle(els[i]);

        var defaultElem = document.createElement(els[i].nodeName)
        var child = document.body.appendChild(defaultElem);
        var defaultsStyles = window.getComputedStyle(defaultElem,null);     

        var computed = window.getComputedStyle(els[i],null).cssText;

        for(var j = 0, maxj = defaultsStyles.length; j < maxj; j++)
        {
            var defaultStyle = defaultsStyles[j] + ": " + defaultsStyles.getPropertyValue(""+defaultsStyles[j]) + ";"
            if(computed.startsWith(defaultStyle)) {
                computed = computed.substring(defaultStyle.length);
            } else {
                computed = computed.replace(" " + defaultStyle, "");
            }
        }

        child.remove();

        els[i].setAttribute("style", computed);
    }
}

setStyle(document.getElementsByTagName("body")[0]);

console.log("DONE");

- Stephan T.

Answer 3

您可以像这样遍历元素的所有CSS样式：

var myElement = document.getElementById('someId');
var myElementStyle = myElement.style;

for(var i in myElementStyle){
    // if it's not a number-index, print it out.
    if(/^[\d]+/.exec(i) == null){
        console.log("Style %s = %s", i, myElementStyle[i]);
        /*
         * Do other stuff here...
         */
    }
}

- JasonWyatt

---

嗨 - 感谢您的建议 - 但是我的 myElementStyle[i] 看起来总是为空。我的样式是从外部 CSS 设置的，而不是内联设置的。 - Richard H

Answer 4

对于一个DOM元素，如何获取指定在CSS中的所有样式？需要遍历所有CSS样式名称吗？

是的，需要。

还有更优雅的方法吗？

我不知道是否更优雅（优雅在主观评价中相当高），但如果您使用jQuery等库，它肯定会更短更简洁。这里有一个解决方案，是其他人编写以回答另一个问题的： 如何使用jQuery获取所有元素CSS属性列表？ Firebug是如何做到的？

我不知道。

- karim79