CSS & Javascript: Get a list of CSS custom attributes

Question

From this code:

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

}

With javascript -- for example from a $('.test') -- how can I get a list of the CSS attributes wich have the property name starting with the prefix "-custom-" ? (they can have various name, but always the same prefix)

I would like to get this:

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

I know that I can also use the data- HTML attribute, but for some very specifics reasons I need to use a CSS equivalent. Thanks for your help.

Answer 1

Short Answer: IE 9 will give you these values.

However, Firefox/Chrome/Safari parse them out.

example jsfiddle

you can loop through the document's stylesheets to find a match to the desired selector (note that this can be a costly procedure especially on sites with large/multiple CSS files)

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

you'll notice in browsers other than IE 9 (haven't tested IE 8 or lower) that the -custom- styles have been removed from the cssText.