CSS Regeln mit JavaScript hinzufügen

Torben Brodt

Administrator

Lexicon articles: 104

Friday, February 18th 2011, 3:23pm

Content

1. Code
2. Beispiel

Abstract

Hier wird erläutert wie man mit JavaScript dynamisch CSS Regeln hinzufügen kann.

Article

Man kann dynamisch ein Element "style" in den DOM Baum einhängen. Auf diese Art können CSS dynamisch nachgeladen werden.
Bei einigen Browser muss das style.styleSheet Element genutzt werden, bei anderen hängt man einfach einen Textknoten ein.

1. Code

Dazu habe ich folgende Funktion eingeführt:

JavaScript Code

function addCss(rules) {
	var head = document.getElementsByTagName('head')[0],
	style = document.createElement('style'),
	rules = document.createTextNode(rules);
 
	style.type = 'text/css';
	if(style.styleSheet)
		style.styleSheet.cssText = rules.nodeValue;
	else style.appendChild(rules);
	head.appendChild(style);
};

2. Beispiel

Ein Beispielaufruf sieht wie folgt aus:

JavaScript Code

addCss(
	'li {'+
	'	list-style-type: none;'+
	'}'+
	'li a {'+
	'	display:block;'+
	'	border-bottom:1px solid #afafaf;'+
	'	margin:10px;'+
	'}'+
	'li a:hover {'+
	'	border-color:#00ff00;'+
	'	background-color:#eeffee;'+
	'}'
);