18

重複の可能性:
JavaScript から CSS ルールセットを変更する

インライン スタイリングを行わずに Css スタイルシート宣言を変更する可能性があるかどうか疑問に思っていました。

簡単な例を次に示します。

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

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

これにより、青く書かれたボックスが表示され、ホバーすると緑に変わります。

色にインライン スタイルを指定すると、ホバー動作が失われます。

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

それは、何があっても、赤い書かれたボックスを与えます。

したがって、私の質問は、スタイルをインラインのもので上書きするのではなく、css 宣言オブジェクトにアクセスして変更するにはどうすればよいかということです。

ありがとう、

4

2 に答える 2

39

cssRules元のスタイルシートに対応する DOM スタイルシート オブジェクトで を使用して、ルールを変更できます。

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

IE ではrules代わりにcssRules.

ここにデモンストレーションがあります：http://jsfiddle.net/8Mnsf/1/

于 2012-11-23T11:51:16.307 に答える
6

クラスを定義し、javascriptを使用してHTML要素にクラスを割り当て/削除するだけです。

要素にスタイルを直接割り当てると、優先度が最も高くなり、他のすべてのCSSルールが上書きされます。

編集：cssTextプロパティを使用することをお勧めします。ここの例を参照してくださいcssTextプロパティ

于 2012-11-23T11:50:11.563 に答える