如何使用JavaScript读取CSS规则值？

一尘不染

如何使用JavaScript读取CSS规则值？

javascript

我想返回一个包含CSS规则所有内容的字符串，就像您在嵌入式样式中看到的格式一样。我希望能够在不知道特定规则中包含什么的情况下执行此操作，因此我不能仅通过样式名称（如.style.width等）将它们拉出。

CSS：

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

到目前为止的代码：

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')

阅读 307

2020-04-25

共1个答案

一尘不染

以scunliffe的答案为基础：

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

alert(getStyle('.test'));

2020-04-25