Question

According to MDN (https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule) The CSSStyleRule object’s style property is read-only. Is there a way to be able to reliably modify its style attributes in modern browsers (mainly chrome/safari and firefox, but IE9 would be nice too)?

Semi-related question but is there any way to access comments that are inside of the style rule (edit: and know which rule/selector the comment “belongs” to)? i.e. for this rule:

.my-rule {
    /* A Comment */
    color: blue;
}

I want to be able to retrieve the /* A Comment */ via javascript.

Answer 1

Here is the UPDATED DEMO

JavaScript :

var styles = document.getElementsByTagName('style')[0].textContent;
var comments =  styles.match(/\/\*.*\*\//g);
console.log(comments);

UPDATE

Since the OP wanted relations with comments, use this code instead :

var styles = document.getElementsByTagName('style')[0].textContent;
var objItems = {};
var arrItems = styles.split('}');
arrItems.pop();

for (var i = 0; i < arrItems.length; i++) {
    var grp = arrItems[i].split('{');
    objItems[$.trim(grp[0])] = arrItems[i].match(/\/\*.*\*\//g);
}

for(var i in objItems) {
      console.log(i + ': [ ' + objItems[i] + ' ]');
}