CSSStyleRule 的跨浏览器（现代浏览器）操作答案

【问题标题】：Cross browser (modern browsers) manipulation of CSSStyleRuleCSSStyleRule 的跨浏览器（现代浏览器）操作
【发布时间】：2013-01-01 00:59:07
【问题描述】：

根据 MDN (https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule) CSSStyleRule 对象的样式属性是只读的。有没有办法能够在现代浏览器中可靠地修改其样式属性（主要是 chrome/safari 和 firefox，但 IE9 也不错）？

半相关的问题，但有没有办法访问样式规则内的 cmets（编辑：并知道评论“属于”哪个规则/选择器）？即对于此规则：

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

我希望能够通过 javascript 检索 /* A Comment */。

【问题讨论】：

标签： javascript css dom-manipulation

【解决方案1】：

这里是UPDATED DEMO

JavaScript：

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

更新

由于 OP 想要与 cmets 建立关系，请改用此代码：

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] + ' ]');
}

【讨论】：

这行得通，但我可能应该澄清一下，我需要能够将每个评论与包含它的规则相关联。所以对于这个例子，我最好是这样的：{".my-rule": ["A Comment"]}
你在 jsbin 的第 4 行错过了一个分号，无论如何是的，它似乎有效。