CSS & Javascript：获取 CSS 自定义属性列表答案

【问题标题】：CSS & Javascript: Get a list of CSS custom attributesCSS & Javascript：获取 CSS 自定义属性列表
【发布时间】：2015-07-08 00:59:04
【问题描述】：

从此代码：

HTML

<div class="test"></div>

CSS

.test {
    background-color:red;
    font-size:20px;
    -custom-data1: value 1;
    -custom-data2: 150;
    -custom-css-information: "lorem ipsum";

}

使用 javascript——例如来自$('.test')——我如何获得属性名称以前缀“-custom-”开头的 CSS 属性列表？（它们可以有不同的名称，但总是相同的前缀）

我想得到这个：

{
    customData1: "value 1",
    customData2: 150,
    customCssInformation: "lorem ipsum"
}

我知道我也可以使用data- HTML 属性，但出于一些非常具体的原因，我需要使用等效的 CSS。感谢您的帮助。

【问题讨论】：

你可能想看看这个问题：stackoverflow.com/questions/2926326/…
您应该考虑为此使用data-* 属性。
@Andrew：是的，我知道，但是出于一个非常具体的原因，我需要在我的 css 中使用相当于 data- HTML 属性的东西。
请注意，任何解决方案都会涉及到文本的解析，就浏览器而言，CSS 只是大文本字符串。因此，如果您有巨大的 css 文件，请记住潜在的性能问题。

标签： javascript jquery css

【解决方案1】：

简短回答：IE 9 将为您提供这些值。

但是，Firefox/Chrome/Safari 会将它们解析出来。

example jsfiddle

您可以遍历文档的样式表以找到与所需选择器的匹配项（请注意，这可能是一个昂贵的过程，尤其是在具有大型/多个 CSS 文件的网站上）

var css = document.styleSheets, 
    rules;

// loop through each stylesheet
for (var i in css) {
    if (typeof css[i] === "object" && css[i].rules || css[i].cssRules) {
        rules = css[i].rules || css[i].cssRules;
        // loop through each rule
        for (var j in rules) {
            if (typeof rules[j] === "object") {
                if (rules[j].selectorText) {
                    // see if the rule's selectorText matches
                    if (rules[j].selectorText.indexOf('.test') > -1) {
                        // do something with the results.
                        console.log(rules[j].cssText);
                        $('.test').html(rules[j].cssText);
                    }
                }
            }
        }
    }
}

您会注意到在 IE 9 以外的浏览器（尚未测试 IE 8 或更低版本）中，-custom- 样式已从 cssText 中删除。

【讨论】：

【解决方案2】：

这里有一个可以获取自定义css属性的解决方案：

<style>
.custom-thing
{
    -custom-1: one;
    -custom-2: 4;
}
</style>
<a class='custom-thing' href='#' onclick='test();'>test</a>
<script>
    function test() {
        var valueOne = getCssValue('.custom-thing', '-custom-1');
        alert(valueOne);

        var valueTwo = getCssValue('.custom-thing', '-custom-2');
        alert(valueTwo);
    }

    function getCssValue(selector, attribute) {
        var raw = getRawCss(selector);
        if (!raw) {
            return null;
        }
        var parts = raw.split(';');
        for (var i in parts) {
            var subparts = parts[i].split(':');
            if (trimString(subparts[0]) == attribute) {
                return subparts[1];
            }
        }
        return null;
    }

    function trimString(s) {
        return s.replace(/^\s+|\s+$/g, ""); 
    }

    function getRawCss(selector) {
        for (var i = 0; i < document.styleSheets.length; i++) {
            var css = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
            for (var x = 0; x < css.length; x++) {
                if (css[x].selectorText == selector) {
                    return (css[x].cssText) ? css[x].cssText : css[x].style.cssText;
                }
            }
        }
        return null;
    }
</script>

这花了我一点时间来整理，我以前从来不知道你可以做到这一点。

很酷！

【讨论】：

感谢您的回答，我测试了它，但它看起来只能在 IE (IE9) 上运行，并且仅使用 -custom-2 属性。对于其他浏览器，它总是返回 null。
当样式表从外部加载时，这在 Chrome 中似乎不起作用；只有使用的属性是可查询的

【解决方案3】：

有点晚了，但我相信值得大惊小怪地发布它，以防我也可以帮助其他人。

var css = document.styleSheets[0]; // some stylesheet

var result = [];
for (var r=0; r<css.rules.length; r++)
{
   var item = { selector: css.rules[r].selectorText };
   var styles = {};
   for (var s in css.rules[r].style)
   {
       if (!isNaN(s))
       {
            var key = css.rules[r].style[s];
            var val = css.rules[r].style[key];
            styles[key] = val;
       }
   }
   item.styles = styles;
   result.push(item);
}

console.log(result);

它会打印出一棵包含所有选择器及其属性的整洁树。 :)

【讨论】：