JavaScript で CSS スタイルシートの値を変更するにはどうすればよいですか?

JavaScript を使用した CSS スタイルへのアクセスと変更

JavaScript を使用して CSS スタイルを変更する場合、正しい要素と値をターゲットにすることが重要です。インライン CSS 値は簡単に変更できますが、スタイルシート内で定義された値の取得と変更は困難な場合があります。

CSS スタイルシート値へのアクセス

指定された CSS スタイルシート値にアクセスするにはID の場合は、次の手順に従います。

1. document.styleSheets を使用してすべてのスタイルシートを取得します。
2. href プロパティに基づいて目的のスタイルシートを決定します。
3. ルールの配列を取得します。 (例: ほとんどのブラウザの cssRules、IE のルール)。
4. その selectorText プロパティを使用して特定のルールを識別します。

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

目的のルールが特定されたら、それを変更できます。

1. セレクターを変更するには、selectorText プロパティを設定します (例: #tId から #newId)。
2. Set CSS 値を変更するための value プロパティ (例: width: 50% から width: 30%)。

例

提供されたシナリオでは:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

次の JavaScript を使用して、スタイルシートの幅プロパティを変更できます:

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

これにより、スタイルシート ルールが次のように更新されます:

#tId {
      width: 30%;
   }

インライン スタイルは依然としてスタイルシート値よりも優先されることに注意してください。インライン スタイルをオーバーライドするには、document.getElementById('id').style.width = value.

を使用します。

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