web-dev-qa-db-ja.com

JavaScriptでcssルールオブジェクトを変更する

重複の可能性：
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宣言オブジェクトにアクセスして変更するにはどうすればよいかということです。

ありがとう、

javascriptcssoocss
12
jonBreizh

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

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

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

IEはrulesの代わりにcssRulesを使用することに注意してください。

これがデモンストレーションです： http://jsfiddle.net/8Mnsf/1/

26
Asad Saeeduddin

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

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

編集：

cssTextプロパティを使用することをお勧めします

ここの例を参照してください cssTextプロパティ

4
Kemal Dağ