¿Cómo se añaden reglas CSS (por ejemplo strong { color: red }
) mediante Javascript?
El enfoque simple y directo es crear y añadir un nuevo nodo style
al documento.
// Tu CSS como texto
var styles = `
.qwebirc-qui .ircwindow div {
font-family: Georgia,Cambria,"Times New Roman",Times,serif;
margin: 26px auto 0 auto;
max-width: 650px;
}
.qwebirc-qui .lines {
font-size: 18px;
altura de línea: 1.58;
letter-spacing: -.004em;
}
.qwebirc-qui .nicklist a {
margin: 6px;
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css";
styleSheet.innerText = estilos
document.head.appendChild(styleSheet)
También puede hacerlo utilizando las interfaces CSS de nivel 2 del DOM (MDN):
var sheet = window.document.styleSheets[0];
sheet.insertRule('strong { color: red; }', sheet.cssRules.length);
...en todos excepto (naturalmente) IE8 y anteriores, que utilizan su propia formulación marginalmente diferente:
sheet.addRule('strong', 'color: red;', -1);
Hay una ventaja teórica en esto en comparación con el método createElement-set-innerHTML, en que usted don't tiene que preocuparse de poner caracteres HTML especiales en el innerHTML, pero en la práctica los elementos de estilo son CDATA en HTML heredado, y '<' y '&' rara vez se utilizan en las hojas de estilo de todos modos.
Usted necesita una hoja de estilos en su lugar antes de que pueda empezar a añadir a ella de esta manera. Puede ser cualquier hoja de estilo activa: externa, incrustada o vacía, no importa. Si no hay ninguna, la única forma estándar de crearla por el momento es con createElement.