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

javascript html css

2022-08-30 04:44:46

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

The 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')

答案 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'));

答案 2

由于“nsdel”的可接受答案仅适用于文档中的一个样式表，因此这是经过调整的完整工作解决方案：

    /**
     * Gets styles by a classname
     * 
     * @notice The className must be 1:1 the same as in the CSS
     * @param string className_
     */
    function getStyle(className_) {

        var styleSheets = window.document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            var classes = styleSheets[i].rules || styleSheets[i].cssRules;
            if (!classes)
                continue;
            var classesLength = classes.length;
            for (var x = 0; x < classesLength; x++) {
                if (classes[x].selectorText == className_) {
                    var ret;
                    if(classes[x].cssText){
                        ret = classes[x].cssText;
                    } else {
                        ret = classes[x].style.cssText;
                    }
                    if(ret.indexOf(classes[x].selectorText) == -1){
                        ret = classes[x].selectorText + "{" + ret + "}";
                    }
                    return ret;
                }
            }
        }

    }

注意：选择器必须与 CSS 中的相同。