获取DOM元素的所有CSS样式（一个Firebug）

Question

对于DOM元素，如何获取CSS中为特定元素指定的所有样式？是否遍历所有CSS样式名称？

或者还有更优雅的方法吗？ Firebug是如何做到的？

谢谢

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

的形式返回

Answer 2

您可以遍历所有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...
         */
    }
}

Answer 3

对于DOM元素，我如何获得全部在CSS中指定的样式特定元素？是这样吗遍历所有CSS样式名称？

是，是。

或者有没有更优雅的方法？

我不知道更优雅（主观上的优雅程度很高），但是如果您使用jQuery之类的库，肯定会更短更甜，这是有人编码来回答另一个问题的解决方案：

How Can I Get List Of All Element CSS Attributes with jQuery?

Firebug如何做到？

我不知道。