jquery, belgenin global css tanımını değiştirebilir mi?

Question

Tıklandığında belirli bir css sınıfını gizleyecek bir onay kutusu oluşturmaya çalışıyorum, ancak bu etkiyi o sınıfın gelecekteki tüm nesneleri için de uygulamak istiyorum.

örneğin

i 2 renklendirilmiş:

diva DIVB

i onay kutusu sınıfının abc tüm div'leri gizlemek istediğiniz klası yok

sınıf abc taşımaktadır, bu kullanarak, kolay $(".abc").hide(). Ancak sorun şu ki, sitenin başka bir bölümü daha sonra abc sınıfının divB'sini yaptıysa gizlenmeyecektir. Çünkü jQuery kodu o zaman sadece divA'ya uygulanmış olurdu.

Yapmaya çalıştığım şey, onay kutusunun belgenin global css tanımını değiştirmesini sağlamaktır. kullanıcı onay kutusunu tıklattığında, gizlenecek abc sınıfını değiştirirdim ve daha sonra herhangi bir div bu sınıfa katıldıklarında gizlenirdi.

jquery'de bu mümkün mü?

Answer 1

.abc seçiciye yeni kurallar eklemek için insertRule ve addRule (gerektiğinde) yöntemlerini kullanabilirsiniz. Bu, gelecekteki o sınıfı uygulayan bir şeyi etkilemelidir.

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); 
} 

da bunun için bir jQuery eklentisi var: $.rule();

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

Ve aşağıdaki CSS var: Yani

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

Ben Muhtemelen onay kutusunu ekleyip bir sınıf kaldırmak oluştururlar < gövde > eleman sağlayarak bu bakacaklarını https://github.com/flesler/jquery.rule

Answer 2

mevcut bulunuyor Sayfanızda başka bir yer varsa <div> '.abc' sınıfına eklenirse, ilk CSS kuralını alır ve gizlenir.