CSS & Javascript: Get a List of Custom CSS 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 $('.test') - how can I get a list of CSS attributes that have a property name starting with the prefix "-custom-"? (they may have a different name, but always the same prefix)

I would like to get the following:

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

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

Answer 1

Short answer: IE 9 will provide you with these values.

However, Firefox / Chrome / Safari parses them.

jsfiddle example

you can scroll through the stylesheets of documents to find the match with the selector you need (note that this can be an expensive 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 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 will notice that in browsers other than IE 9 (not tested IE 8 or lower), the styles -custom- were removed from cssText .

Answer 2

Here is a solution that can get custom css attributes:

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

It took me a little bit, and I never knew that you could have done this before.

Pretty awesome!

Answer 3

Rather late, but I think it's worth the fuss if I can help others.

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

And it will lead you out of a neat tree with all the selectors and their properties. :)