JavaScript:Firefox:外部から読み込んだスタイルシートへは動的にスタイルを追加できない

イントロダクション

記事「Blogger:ボタンを押すと、ブラウザの幅いっぱいまでコンテンツを表示する (最低幅は固定）」にて、コンテンツの幅を動的に変更するために、スタイルシートへスタイルを動的に追加する JavaScript コードを作成しました。

そのときに、構想の初期段階では Web ページに読み込まれている既に存在するスタイルシートへスタイルを追加すればいいのではないかと思っていました。しかしながら、その実装方法にて処理を実装すると、Firefox 29（それ以前のどのバージョンからこのような動作仕様になっていたのかは調べていません。） ではセキュリティエラーとなりスタイルを追加することができませんでした。

その時に調査した内容についてここに記載したいと思います。

調査内容

Web ページに読み込まれたスタイルシートのリストは、document.styleSheets で参照することができます。
例えば、私のブログの場合には、以下のスタイルシートが読み込まれています。

ブログの Web ページで読み込まれたスタイルシートの一覧

このとき、スタイルシートの右側に　→　～.css とあるのが、外部のファイルから読み込まれたスタイルシートです。


外部のファイルから読み込まれたスタイルシートのプロパティは次のようになっています。

外部のファイルから読み込まれたスタイルシートのプロパティ

また、Web ページ内に定義されたスタイルシートのプロパティの場合には、次のようになっています。

Web ページ内に定義されたスタイルシートのプロパティ

以上のように、プロパティの値にいくつかの違いがあることがわかります。
例えば、外部のファイルから読み込まれたスタイルシートのプロパティの場合には、href に読み込み元の URL が入っています。
また、Web ページ内に定義されたスタイルシートのプロパティの場合には、cssRules があることがわかります。


ここからが本題です。
外部のスタイルシートに対してスタイルを追加してみます。

今回は開発ツールのコンソールから JavaScript を実行しました。

実行コード：
document.styleSheets[1].insertRule("a{font-size:30px}", 10);

結果：
[Exception... "The operation is insecure."  code: "18" nsresult: "0x80530012 (SecurityError)"  location: "<unknown>"]


以上のように、外部のスタイルシートに対してスタイルを追加しようとすると、セキュリティエラーが発生します。


Web ページ内に定義されたスタイルシートへスタイルを追加した場合には、次のように正常にスタイルが追加され、Web ページへ反映されます。

実行コード：
document.styleSheets[10].insertRule("a{font-size:30px}", 22);

結果：
22


以上のことから、外部から読み込んだスタイルシートへは動的にスタイルを追加することができないことがわかります。

まとめ

以上の調査より、外部から読み込んだスタイルシートへは動的にスタイルを追加することができないことがわかりました。

このことを考慮して、動的にスタイルをスタイルシートへ追加する JavaScript コードを作成してみました。