CSS和Javascript:获取CSS自定义属性列表

CSS & Javascript: Get a list of CSS custom attributes

本文关键字：CSS 自定义属性 列表 获取 Javascript      更新时间：2023-09-26

从这个代码:

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。谢谢你的帮助。

简短的回答:ie9会给你这些值。

但是，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);
                    }
                }
            }
        }
    }
}

你会注意到在ie9以外的浏览器中(没有测试ie8或更低版本)，-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);

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

相关文章：