« 最近のカホンって高いんだよ | トップページ | ブラウザ判別、1行でできるやつとかIEのバージョンもチェックするとか »

2012年10月28日 (日曜日)

JavaScriptのスタイルシート(CSS)の操作でハマる

 JavaScriptでCSSを操作する。ワケあってjQueryは使わない方向で。CSSファイルは自前のものと、外部スクリプトが読み込むものがある。そこがひっかけポイントだった(誰もひっかけるつもりはないと思うけど)。

 参考にしたのはこれ。とてもわかりやすくまとまっていた。

 JavaScriptによるスタイルシート(CSS)の操作はてなブックマーク - JavaScriptによるスタイルシート(CSS)の操作

 しかし、いろいろやってるうちにつまづく。
 まず、sheet.cssRules.length を拾おうとするとエラー。FireBugで見ると、styleSheet.cssRules自体がnullになっている。そういうこともあるのだな。もちろん、外部スクリプトが読み込んだやつが対象であった(自分で作ったやつなら中味は把握できてる、でも、今後の用途を考えるとなるべく汎用的にしたかったので)。ということで、sheet.cssRules.lengthを見る前に、sheet.cssRulesの存在確認をすることで対処。nullだったら1にしておく、でいいのかな?

 次。既存のスタイルシートに、スタイルルールの追加ができないというもの。sheet.insertRule みたいにするのだけど、Firefoxだけでうまくいかない。Chromeはもちろん、IEでもOKなのに!

 と思って調べると、Firefoxでは外部ドメインのスタイルシートには追加できない、みたいなことが書いてあった。

 javascript - Firefox not able to enumerate document.styleSheets[].cssRules[] - Stack Overflow

 ということで、既存のスタイルシートにスタイルルールを追加するのではなく、まず、スタイルシートを追加するという方向にしてみようかと思う。

 その他参考にしたのはこのへん。

 Javascript cssRules - とみぞーノートはてなブックマーク - Javascript cssRules - とみぞーノート
 document.createStyleSheet で動的に CSS を生成 - IT戦記はてなブックマーク - document.createStyleSheet で動的に CSS を生成 - IT戦記

 すらすら操作できるようになるにはまだまだ道のりが遠そうだ。


|

« 最近のカホンって高いんだよ | トップページ | ブラウザ判別、1行でできるやつとかIEのバージョンもチェックするとか »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/55989296

この記事へのトラックバック一覧です: JavaScriptのスタイルシート(CSS)の操作でハマる:

« 最近のカホンって高いんだよ | トップページ | ブラウザ判別、1行でできるやつとかIEのバージョンもチェックするとか »