javascript-如果从使用的样式表文件中指定了css类,如何获取完整的css信息

我想通过单击详细找到应用类的完整CSS信息.喜欢

<div class="class1 class2">This is my div</div>

假设我在xyz.css文件中写了CSS

.class1{
   background-color:#999999;
   width:auto;
   overflow:hidden;
}

.class2{
   background-color:#856241;
   width:500px;
   overflow:hidden;
}

单击div之后,我要显示应用于div的所有css信息.
jQuery解决方案将是首选.

根据前几个答案,我得到了所有计算出的样式,但是我对我唯一应用的类样式细节感兴趣.

解决方法:

您可以通过以下方式获取元素的当前样式：

var elem = ...;
var css = document.defaultView ? document.defaultView.getComputedStyle(elem, null) : elem.currentStyle;

if ('length' in css) {
    // iterate over all property names
    for (var i = 0, l = css.length; i < l; ++i) {
        var propertyName = css[i];
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
} else {
    // IE
    for (var propertyName in css) {
        // get property value
        var value = css[propertyName];
        if (value != void 0) {
            console.log(propertyName+': '+value);
        }
    }
}

在这里尝试：http://jsfiddle.net/P5WYC/2/

您可能还想尝试使用document.styleSheets(请参见http://www.quirksmode.org/dom/w3c_css.html)

标签：stylesheet,firebug,css,javascript,jquery
来源： https://codeday.me/bug/20191208/2088163.html