¿puede jquery manipular la definición de css global del documento?

Question

Estoy tratando de hacer una casilla que oculte una clase CSS específica cuando se hace clic, pero también quiero que este efecto se aplique a todos los objetos futuros que obtienen esa clase específica.

por ejemplo: tengo 2 divs:

diva es de clase ABC

divB no tiene ninguna clase

Quiero que la casilla de verificación para ocultar todos los divs de clase abc, esto es fácil, usando $(".abc").hide(). pero el problema es que si otra parte del sitio creó divB de la clase abc más adelante, entonces no se ocultará. porque el código jquery solo se habría aplicado a divA en ese momento.

lo que estoy tratando de hacer es hacer que la casilla de verificación manipule la definición de css global del documento. entonces, cuando el usuario haga clic en la casilla de verificación, cambiaría la clase abc para que se oculte, y más adelante cuando cualquier div se una a esa clase, se ocultaría.

¿es esto posible en jquery?

Answer 1

Puede usar los métodos insertRule y addRule (cuando sea necesario) para agregar nuevas reglas al selector .abc. Eso debería afectar cualquier cosa en el futuro que logre que la clase se le aplique.

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

Hay un plugin de jQuery para esto también: $.rule(); Está disponible en https://github.com/flesler/jquery.rule

Answer 2

Probablemente me volvería a manejar esto por tener su casilla añadir y eliminar una clase formar el <cuerpo> elemento:

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

y tienen el siguiente CSS:

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

Así Si en otro lugar de su página se agrega <div>, se le agrega la clase '.abc', entonces asumirá la primera regla CSS y se ocultará.