CSS＆Javascript：获取CSS自定义属性的列表

从这个代码：

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') - 我怎样才能得到一个CSS属性的列表，其中的属性名称以“-custom-”开头？ （它们可以有各种名称，但始终是相同的前缀）

我想得到这个：

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

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

---

简答：IE 9会给你这些值。

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

例如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删除。

---

这是一个可以获得自定义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>

这让我有点拼凑在一起，我从来不知道你可以做到这一点。

很酷！

---

比较晚，但我相信这是值得大惊小怪的发布它，以防我可以帮助其他人。

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

它会打印出你所有的选择器和它们的属性。 :)

链接地址: http://www.djcxy.com/p/54659.html

上一篇: CSS & Javascript: Get a list of CSS custom attributes

下一篇: How to update 2 different schemas from one EER Diagram?