如何将整个 CSS 规则内容提取为字符串？

如何提取 CSS 规则值

如何返回包含 CSS 规则所有内容的字符串，就像您的格式一样d 以内联样式查看？这可以在不知道规则的具体内容的情况下完成，避免需要通过样式名称提取它们。

考虑以下 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')

基于 scunliffe 的答案并改编自其他来源，我们可以增强此代码以提取 CSS 规则value:

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

此代码遍历 CSS 规则，检查选择器文本是否与指定的类名匹配。对于每个匹配规则，它都会收集相应的 CSS 文本并将其累积到 cssText 变量中。最后，该函数返回累积的 CSS 文本，提供具有所需内联样式格式的字符串。

以上是如何将整个 CSS 规则内容提取为字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！