Introduction

ブログ内検索

  • このサイトの記事を検索 by Google

おすすめの一冊!

無料ブログはココログ

« script 要素の charset 属性 | トップページ | iframe 要素の onload ハンドラ »

2011-05-05

CSS ルールの動的な追加


スタイルシート (CSS) のルールを動的に追加したい、と思って、
やり方を調べてみました。


ユーザスクリプト (GreaseMonkey) で DOM を操作して動的に div 要素とかを
作ったりしているのですが、見た目を変えるために各要素の style プロパティを
ひとつひとつ指定していると、だんだん面倒になってきます。

特に、ユーザの操作によって見た目の装飾を ON/OFF したい場合、
背景色はちゃんと切り替わるけど文字の色を変え忘れたりとかして、
ちょっと悲しくなったり・・・

できればクラス名をひとつ付け外しするだけで済ませられないかなぁ、
と思ったわけです。


で、Mozilla のリファレンスを眺めていたら、まさにやりたいことが書いてありました。
stylesheet.insertRule -- Gecko DOM Reference
具体的には、以下のようなコードでできます。
function addStyle(cssText) { var elem = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(elem); document.styleSheets[document.styleSheets.length-1].insertRule(cssText); } addStyle('.grayOut { opacity: 0.5; }');
ちなみに、Mozilla (MDC Docs) のリファレンスはかなり使えます。 ただし、日本語版サイトは多くのリンクが死んでるので、 英語版サイトがオススメです。   ・HTML element reference   ・CSS Reference   ・Gecko DOM Reference   ・JavaScript Reference ご参考まで。

« script 要素の charset 属性 | トップページ | iframe 要素の onload ハンドラ »