JavaScript を使用して CSS 宣言に直接アクセスし、変更するにはどうすればよいでしょうか?

JavaScript を使用した CSS 宣言へのアクセスと変更

インライン スタイルは、要素の外観を変更する簡単なアプローチを提供しますが、既存の CSS ルールをオーバーライドする可能性があります。そして意図された動作を妨害します。これを回避するために、開発者は CSS 宣言オブジェクトを直接変更することを選択できます。

CSS 宣言オブジェクトには、ドキュメント オブジェクトの styleSheets プロパティを通じてアクセスできます。各 styleSheet オブジェクトには、cssRules (または Internet Explorer のルール) のコレクションが含まれています。これらのルールは、それぞれのスタイルシート内で定義されたスタイルを表します。

CSS 宣言オブジェクトを変更するには、スタイルシートの cssRules コレクションから対応するルールを取得し、そのスタイル プロパティにアクセスします。例:

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';</code>

このコードは、スタイルシートの最初のルールの色の宣言を「赤」に変更します。

ルールのスタイル プロパティを変更すると、既存のルールがオーバーライドされることに注意してください。そのルール内の宣言。特定のプロパティを選択的に変更するには、次の構文を使用します。

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style['background-color'] = 'blue';</code>

このコードは、最初のルールの背景色プロパティのみを変更します。

この手法をデモンストレーションする次の JSFiddle は、その方法を示しています。ホバー効果に影響を与えずに、「box」クラスの要素の色を変更するには: http://jsfiddle.net/8Mnsf/1/

以上がJavaScript を使用して CSS 宣言に直接アクセスし、変更するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。