jqueryはドキュメントのグローバルなCSS定義を操作できますか？

Question

私は、クリックすると特定のcssクラスを隠すチェックボックスを作ろうとしていますが、その特定のクラスを取得するすべての将来のオブジェクトにもこの効果を適用したいと思っています。例えば

：私は2つのdivを持っている：

DIVAを

DIVB iはチェックボックスがクラスabcのすべてのdivを非表示にするにはクラス

を持っていないクラスABCであり、これは使用して、簡単です。 $(".abc").hide()。問題は、サイトの別の部分が後にクラスabcのdivBを作成した場合、それは隠されないということです。 jqueryコードはその時点でdivAにしか適用されていなかったからです。

私がしようとしていることは、ドキュメントのグローバルCSS定義を操作することです。ユーザーがチェックボックスをクリックすると、私はabcクラスを非表示に変更し、後でそのクラスに参加したdivが非表示になるたびに変更します。

これはjqueryで可能ですか？

Answer 1

.abcセレクタに新しいルールを追加するには、insertRuleおよびaddRule（必要な場合）のメソッドを使用できます。それは将来そのクラスが適用されるものに影響を与えるはずです。

var stylesheet = document.styleSheets[0], 
    selector = ".abc", rule = "{color: red}"; 

if (stylesheet.insertRule) { 
    stylesheet.insertRule(selector + rule, stylesheet.cssRules.length); 
} else if (stylesheet.addRule) { 
    stylesheet.addRule(selector, rule, -1); 
} 

これにはjQueryプラグインもあります。$.rule();

$('body').toggleClass('hideABC'); 

そして、次のCSSがあります：だから

body.hideABC div.abc { display:none; } 
body div.abc { display:block; } 

をそれは私はおそらくあなたのチェックボックスを追加し、クラスを削除形成<体>素子を有することにより、これを扱うでしょうhttps://github.com/flesler/jquery.rule

Answer 2

でご利用いただけますあなたのページの他の場所に<div>が追加されると、 '.abc'クラスが追加され、最初のCSSルールが適用され、非表示になります。