## インライン スタイルを使用せずに JavaScript を使用して CSS ルールを変更するにはどうすればよいですか?

インライン スタイル設定を使用せずに JavaScript を使用して CSS ルールを変更する

インライン スタイル設定に頼らずに CSS 宣言を動的に変更する必要がある場合があります。次の例を考えてみましょう:

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

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

これにより、ホバーすると緑色に変わる青いボックスが生成されます。ただし、インライン スタイルはこの動作をオーバーライドできます。

<code class="html"><div class="box" style="color:red;">TEXT</box></code>

この場合、ホバー状態に関係なく、ボックスは常に赤になります。

この問題を回避するには、 CSS 宣言オブジェクトを直接指定します。その方法は次のとおりです:

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

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

Internet Explorer は cssRules の代わりにルールを使用することに注意してください。

デモは次のとおりです: [Fiddle](http://jsfiddle.net/8Mnsf/1/)

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