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

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

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

divA имеет класс abc

divB не имеет класса

Я хочу, чтобы флажок скрывал все divs класса abc, это легко, используя $(".abc").hide(). но проблема в том, что если другая часть сайта сделана divB класса abc позже, то она не будет скрыта. потому что код 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

Ответ 2

Я бы, вероятно, справился с этим, добавив ваш флажок и удалив класс формы <body> Элемент:

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

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

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

Итак, если в другом месте вашей страницы есть <div> получает добавленный к нему класс ".abc", тогда он примет первое правило CSS и будет скрыто.