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

JavaScript を使用して CSS 値を変更する

JavaScript でインライン CSS 値を操作する場合、変更が必要な状況がよく発生します。外部 CSS スタイルシートで定義されたスタイルの値。ただし、インライン スタイルを変更するだけでは問題が発生する可能性があります。

たとえば、幅が 30% のインライン スタイルがあり、スタイルシート ルールで幅が 50% に設定されている場合、インライン スタイルを変更すると、スタイルシートの値。さらに、幅プロパティを設定する前に取得すると、インライン スタイルがないために「null」が返され、論理演算のために幅を決定する必要があるシナリオで問題が発生します。

これを解決するには、外部スタイルシート自体に定義されている CSS 値にアクセスして変更する方法。幸いなことに、JavaScript が解決策を提供します。

スタイルシート ルールの取得

最初のステップは、スタイルシート オブジェクトを取得することです。これは、「document.styleSheets」プロパティを使用して実現できます。ドキュメント内のすべてのスタイルシートの配列を返します。

特定のスタイルシートを識別するには、「document.styleSheets[styleIndex].href」プロパティを確認してください。これにより、変更するスタイルシートを見つけることができます。

ルール オブジェクトへのアクセス

スタイルシートを取得したら、ルール オブジェクトにアクセスする必要があります。これらのオブジェクトは、スタイルシート内の個々の CSS ルールを表します。使用可能な名前はブラウザーによって異なります。Internet Explorer では「rules」、その他のほとんどの場合は「cssRules」です。

たとえば、特定のセレクターを使用して特定のルールを識別するには、次の「selectorText」プロパティを確認します。

ルール値の変更

最後に、「value」プロパティを設定することで、これらのルールの値を変更できます。これにより、ルールのセレクターに一致するすべての要素に影響を与え、スタイルシート レベルでスタイルを変更できるようになります。

元の応答で提供されるコード スニペットは、JavaScript を使用してスタイルシート ルールを取得および変更する方法を示しています。このアプローチに従うことで、インライン スタイルの制限なしで CSS 値を効果的に更新でき、ドキュメント内の複数の要素に一貫して変更が適用されるようになります。

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