Injecter de nouvelles règles CSS - Astuces CSS

Anonim

Si vous avez besoin de changer le style d'un élément avec JavaScript, il est généralement préférable de changer le nom d'une classe et que le CSS déjà présent sur la page prenne effet et change le style. Cependant, il existe des exceptions à chaque règle. Par exemple, vous voudrez peut-être changer la pseudo-classe par programme (par exemple :hover). Vous ne pouvez pas faire cela via JavaScript pour la même raison que les style=""attributs en ligne ne peuvent pas modifier les pseudo-classes.

Vous devrez injecter un nouvel élément sur la page avec les styles corrects. Il est préférable de l'injecter au bas de la page pour qu'il remplace votre CSS au-dessus. Facile avec jQuery:

function injectStyles(rule) ( var div = $(" ", ( html: '-' + rule + '' )).appendTo("body"); )

Usage

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

Démo

Plus d'information

  • Les bizarreries d'injection de style dans IE (Ryan Seddon).
  • Fil de débordement de pile.