Inyectar nuevas reglas CSS | Programar Plus ▷ Tutoriales

Si necesita cambiar el estilo de un elemento con JavaScript, normalmente es mejor cambiar el nombre de una clase y hacer que el CSS que ya está en la página surta efecto y cambie el estilo. Sin embargo, hay excepciones a cada regla. Por ejemplo, es posible que desee cambiar mediante programación la pseudoclase (por ejemplo, :hover). No puede hacer eso a través de JavaScript por la misma razón en línea style="" los atributos no pueden cambiar las pseudoclases.

Deberá inyectar un nuevo <style> en la página con los estilos correctos. Lo mejor es inyectarlo en la parte inferior de la página para que anule el CSS que se encuentra arriba. Fácil con jQuery:

function injectStyles(rule) {
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).appendTo("body");    
}

Uso

injectStyles('a:hover { color: red; }');

Manifestación

Más información

Peculiaridades de inyección de estilo en IE (Ryan Seddon).
Subproceso de desbordamiento de pila.