JavaScript を使用した CSS 値の変更

JavaScript を使用すると、インライン CSS 値を設定する簡単な方法が提供されます。ただし、この方法は、インラインではないスタイルシート内で定義された CSS 値を変更するときに問題が発生する可能性があります。

スタイルシートから CSS 値を取得する

次の CSS 値を取得するにはインラインではなく、JavaScript では document.styleSheets を通じてスタイルシートにアクセスできます。この関数は、ドキュメント内のすべてのスタイルシートの配列を返します。特定のスタイルシートを見つけるには、document.styleSheets[styleIndex].href プロパティを使用します。

スタイルシート CSS ルールの変更

目的のスタイルシートが特定されたら、次のステップに進みます。 CSS ルールの配列を取得することです。この配列には、Internet Explorer の場合は rules プロパティを使用し、他のほとんどのブラウザの場合は cssRules を使用してアクセスします。各ルールは、その selectorText プロパティによって区別できます。

CSS 値を変更するには、ルールの value プロパティを設定します。更新されたコードは次のようになります。

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

このアプローチにより、CSS 値をグローバルに変更でき、指定されたスタイルですべての要素を効果的に更新できます。