Als u de stijl van een element met JavaScript moet wijzigen, is het doorgaans beter om de naam van een klasse te wijzigen en de CSS die al op de pagina staat van kracht te laten worden en de stijl te wijzigen. Er zijn echter uitzonderingen op elke regel. U wilt bijvoorbeeld de pseudo-klasse (bijv. :hover) Programmatisch wijzigen . U kunt dat niet doen via JavaScript om dezelfde reden dat inline- style=""attributen pseudo-klassen niet kunnen wijzigen.
U moet een nieuw element op de pagina injecteren met de juiste stijlen erin. Het is het beste om het onderaan de pagina te injecteren, zodat het uw CSS erboven overschrijft. Makkelijk met jQuery:
function injectStyles(rule) ( var div = $(" ", ( html: '-' + rule + '' )).appendTo("body"); )Gebruik
injectStyles('a:hover ( color: red; )');Demo
Meer informatie
- Stijl injectie eigenaardigheden in IE (Ryan Seddon).
- Stack Overflow-draad.