Может ли jquery манипулировать глобальным определением CSS документа?

Question

Я пытаюсь установить флажок, который будет скрывать определенный класс CSS при нажатии, но я также хочу, чтобы этот эффект применялся ко всем будущим объектам, которые получают этот конкретный класс.

например: у меня есть 2 деления:

divA класса abc

У divB нет класса

Я хочу, чтобы флажок скрыл все div класса abc, это легко, используя $(".abc").hide(). но проблема в том, что если другая часть сайта позже создаст divB класса abc, то он не будет скрыт. потому что код jquery был бы применим только к divA в то время.

я пытаюсь сделать так, чтобы флажок манипулировал глобальным определением CSS документа. поэтому, когда пользователь нажимает флажок, я бы изменил класс abc, чтобы он был скрыт, и позже, когда любой div присоединится к этому классу, он будет скрыт.

возможно ли это в jquery?

Answer 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

Answer 2

Я бы, вероятно, справился бы с этим, добавив и убрав свой флажок из элемента :

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

И иметь следующий CSS:

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

Таким образом, если где-то на вашей странице

добавит класс '.abc', он примет первое правило CSS и будет скрыт.