☰

jQuery はドキュメントのグローバル CSS 定義を操作できますか? 質問する

tag-icon • tag-icon jquery css
jQuery はドキュメントのグローバル CSS 定義を操作できますか? 質問する

クリックすると特定の CSS クラスを非表示にするチェックボックスを作成しようとしていますが、この効果を、その特定のクラスを取得する将来のすべてのオブジェクトに適用したいと考えています。

たとえば、2 つの div があります。

divAはクラスabcです

divBにはクラスがありません

チェックボックスでクラス のすべての div を非表示にしたいのですabcが、 を使用すれば簡単です$(".abc").hide()。ただし問題は、サイトの別の部分でabc後でクラス の divB を作成した場合、非表示にならないことです。jQuery コードは、その時点では divA にのみ適用されていたためです。

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

これはjQueryで可能ですか?

ベストアンサー1

あなたはinsertRuleそしてaddRule(必要な場合) セレクターに新しいルールを追加するメソッド.abc。これは、将来そのクラスが適用されるすべてのものに影響を与えるはずです。

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(); こちらから入手できます。https://github.com/flesler/jquery.rule

おすすめ記事