Configuración de reglas de pseudoclase CSS desde JavaScript
Estoy buscando una manera de cambiar las reglas CSS para selectores de pseudoclases (como: enlace, :hover, etc.) desde JavaScript.
Entonces, un análogo del código CSS: a:hover { color: red }en JS.
No pude encontrar la respuesta en ningún otro lugar; Si alguien sabe que esto es algo que los navegadores no admiten, ese también sería un resultado útil.
No se puede diseñar una pseudoclase solo en un elemento particular, de la misma manera que no se puede tener una pseudoclase en un atributo style="..." en línea (ya que no hay selector).
Puedes hacerlo alterando la hoja de estilo, por ejemplo agregando la regla:
#elid:hover { background: red; }
asumiendo que cada elemento que desea afectar tiene una identificación única para permitir su selección.
En teoría, el documento que desea es http://www.w3.org/TR/DOM-Level-2-Style/Overview.html , lo que significa que puede (dada una hoja de estilo incrustada o vinculada preexistente) usar una sintaxis como:
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';
IE, por supuesto, requiere su propia sintaxis:
document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';
Es probable que los navegadores antiguos y menores no admitan ninguna de las sintaxis. Rara vez se modifica la hoja de estilo dinámica porque es bastante molesto hacerlo bien, rara vez es necesario e históricamente problemático.
Reuní una pequeña biblioteca para esto ya que creo que existen casos de uso válidos para manipular hojas de estilo en JS. Las razones son:
- Configurar estilos que deben calcularse o recuperarse; por ejemplo, configurar el tamaño de fuente preferido del usuario a partir de una cookie.
- Establecer estilos de comportamiento (no estéticos), especialmente para desarrolladores de complementos/widgets de interfaz de usuario. Las pestañas, carruseles, etc., a menudo requieren algo de CSS básico simplemente para funcionar; no deberían exigir una hoja de estilo para la función principal.
- Mejor que los estilos en línea, ya que las reglas CSS se aplican a todos los elementos actuales y futuros, y no saturan el HTML cuando se visualiza en Firebug/Desarrollador Tools.
Simplemente coloque el CSS en una cadena de plantilla.
const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;
Luego cree un elemento de estilo, coloque la cadena en la etiqueta de estilo y adjúntela al documento.
const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);
La especificidad se encargará del resto. Luego puedes eliminar y agregar etiquetas de estilo dinámicamente. Esta es una alternativa simple a las bibliotecas y a jugar con la matriz de hojas de estilo en el DOM. ¡Feliz codificación!
