Se você precisar alterar o estilo de um elemento com JavaScript, normalmente é melhor alterar o nome de uma classe e fazer com que o CSS já na página entre em vigor e altere o estilo. No entanto, existem exceções para todas as regras. Por exemplo, você pode querer alterar programaticamente a pseudo-classe (por exemplo :hover). Você não pode fazer isso por meio de JavaScript pelo mesmo motivo que os style=""atributos embutidos não podem alterar as pseudo classes.
Você precisará injetar um novo elemento na página com os estilos corretos. Melhor injetá-lo no final da página para que substitua seu CSS acima dele. Fácil com jQuery:
function injectStyles(rule) ( var div = $(" ", ( html: '-' + rule + '' )).appendTo("body"); )Uso
injectStyles('a:hover ( color: red; )');Demo
Mais Informações
- Injeção de estilo peculiar no IE (Ryan Seddon).
- Thread de estouro de pilha.