Cambiar un conjunto de reglas CSS desde Javascript
¿Es posible realizar cambios en un conjunto de reglas CSS de forma dinámica (es decir, algunos JS que cambiarían un conjunto de reglas CSS cuando el usuario hace clic en un widget)?
Este conjunto de reglas CSS particular se aplica a muchos elementos (a través de un selector de clases) en la página y quiero modificarlo cuando el usuario hace clic en el widget, para que todos los elementos que tienen la clase cambien.
Puedes, pero es bastante engorroso. La mejor referencia sobre cómo hacerlo es el siguiente artículo: Totally Pwn CSS con Javascript ( enlace al archivo web ).
Logré que funcionara con Firefox e IE.No pude en Chrome, aunque parece que admite los métodos DOM.ricosrealm informa que también funciona en Chrome.
Esta es una versión moderna basada en Totally Pwn CSS con Javascript. Es ES6, espero que no te importe.
function getCSSRule(ruleName) {
ruleName = ruleName.toLowerCase();
var result = null;
var find = Array.prototype.find;
find.call(document.styleSheets, styleSheet => {
result = find.call(styleSheet.cssRules, cssRule => {
return cssRule instanceof CSSStyleRule
&& cssRule.selectorText.toLowerCase() == ruleName;
});
return result != null;
});
return result;
}
Esta función devuelve una CSSStyleRule que puedes usar así:
var header = getCSSRule('#header');
header.style.backgroundColor = 'red';
También document.styleSheets enumera las referencias de los objetos CSSStylesSheets. Otra forma de acceder a una hoja de sistema específica en la página es asignando una identificación al estilo o elemento de enlace en el código html y obtenerlo en javascript usando document.getElementById('my-style').sheet . Estos son algunos métodos útiles:
Principales navegadores e IE9+: insertRule(), deleteRule(), removeProperty().
Principales navegadores, ¿Firefox? e IE9+: setProperty().
<stye id="my-style" ...
....
var myStyle = document.getElementById('my-style').sheet
myStyle.insertRule('#header { background: red; }', 0);
También es posible crear dinámicamente un nuevo elemento de estilo para almacenar estilos creados dinámicamente, creo que debería ser una forma de evitar conflictos.
Puede editar CLASS en hojas de estilo de documentos de la siguiente manera
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
.style.background= 'red';
Mostrar fragmento de código
