Question

从这段代码：

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

Answer 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中删除。

Answer 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>

我花了一点时间把它放在一起，我以前从来不知道你能做到这一点。

非常酷！

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

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

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

3 个答案: