JavaScript で CSS 宣言を動的に変更するにはどうすればよいですか?

JavaScript を使用して CSS 宣言にアクセスして変更する

インライン スタイルに頼らずに CSS 宣言を動的に変更するには、CSS ルールセット オブジェクトにアクセスしますDOM スタイルシートから。

CSS 宣言を変更する方法

1. スタイルシート オブジェクトを取得します:

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

2. CSS ルールを取得します:

   <code class="javascript">var rules = sheet.cssRules || sheet.rules;</code>

3. インデックスを使用して目的のルールを選択します:

   <code class="javascript">var rule = rules[0];</code>

4. ルールの変更スタイル:

   <code class="javascript">rule.style.color = 'red';</code>

例

次の例を考えてみましょう:

<code class="html"><style>
    .box {color: green;}
    .box:hover {color: blue;}
</style>

<div class="box">TEXT</div></code>

テキストの色を変更するにはホバー動作に影響を与えることなく、.box を赤色に変更します。

<code class="javascript">var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
rules[0].style.color = 'red';</code>

Internet Explorer に関する注意事項

Internet Explorer は、cssRule の代わりにルールを使用して CSS ルールにアクセスします。

デモ

JavaScript を使用した CSS 宣言へのアクセスと変更のライブ デモンストレーションは、http://jsfiddle.net/8Mnsf/1/

でご覧いただけます。

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