Javascript を使用してスタイルシートに定義されている CSS 値を動的に変更するにはどうすればよいですか?

JavaScript を使用した CSS 値の変更: スタイルシート操作を理解する

多くの場合、JavaScript を使用して CSS 値を動的に変更する必要があることがわかります。インライン CSS 値の設定は簡単ですが、CSS がスタイルシートで定義されている場合は課題が生じる可能性があります。

例:

次の HTML コードを考えてみましょう:

<code class="html"><div id="tId" style="width: 10px"></div></code>

および対応する CSS:

<code class="css">#tId {
  width: 50%;
}</code>

Javascript を使用してインライン スタイル属性を変更すると、以下に示すようにスタイルシートの値がオーバーライドされます:

document.getElementById('tId').style.width = "30%";

これにより、次のようになります。

<code class="html"><div id="tId" style="width: 30%"></div></code>

課題:

このアプローチの問題点は次のとおりです:

• インライン値のみに影響します。
• インライン スタイルがない場合、変更する前に幅の値を取得すると Null が返されます。

解決策: スタイルシート値の操作

これらの課題に対処するには、次のことが必要です。スタイルシート内の値を直接操作します。これを実現する方法は次のとおりです。

1. document.styleSheets を使用してスタイルシートの配列を取得します。
2. document.styleSheets[styleIndex].href を使用して、変更する特定のスタイルシートを見つけます。
3. document.styleSheets[styleIndex].cssRules (ほとんどのブラウザの場合) または document.styleSheets[styleIndex].rules (IE の場合) を使用して CSS ルールの配列を取得します。
4. CSS ルールを特定するselectorText プロパティをチェックして変更する必要があります。

次のコードは、このアプローチを示しています。

var styleIndex = ...; // Index of the targeted stylesheet
var ruleIndex = ...; // Index of the targeted CSS rule
var cssRuleCode = document.all ? 'rules' : 'cssRules';
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var value = rule.value; // Get the current value
rule.value = ...; // Modify the value

このアプローチを実装すると、スタイルシート内の CSS 値を効果的に操作でき、変更は、指定されたスタイルのすべての要素にグローバルに適用されます。

以上がJavascript を使用してスタイルシートに定義されている CSS 値を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。