JavaScriptのStyleSheetオブジェクトのcssTextはReadOnly（読み込み専用）

前回の記事に関連して。

/* hoge.css */
#hoge {
  width: 200px;
}

これを

<head>
<link rel="stylesheet" href="hoge.css" />
</head>

で読み込んで

JavaScriptで

//スタイルシートオブジェクトの取得！
var css = document.styleSheets[0];

// ルールの取得
var rules = css.cssRules || css.rules; // クロスブラウザな意味で。

rules.cssText ="#hoge {width: 20px; }"; // 値を代入

console.log(rules.cssText);

こう書いておくと、

#hoge { width: 200px; }

と表示される。

セットされてない。

element.style.cssTextはセット可能なのに。

http://help.dottoro.com/ljiiimpl.php

に、

The CSSValue.cssText and rule.cssText properties are read-only, all others are read/write.

と書いてあった。