übergebene Variable als style an html-Elemet hängen

[JürgenB]

Hallo,

Es ist oft sinnvoller, mittels JavaScript einem HTML-Elementobjekt eine (weitere?) Klasse zu geben, anstatt CSS-Eigenschaften an dessen style-Objekt zu vergeben. Dazu benutzt man entweder die className-Eigenschaft (Oldschool) oder classList (neuere Browser):

var mytext = document.getElementById("myid");

// old school (ohne classList) oder new school (mit classList)?
if (!document.body.classList) {
    // wenn noch keine Klasse vergeben wurde
    mytext.className = "myClassName";
    // wenn schon mindestens eine Klasse vergeben wurde
    mytext.className += " myOtherClassName";
} else {
    // Wenn dieser Klassenname schon existiert, dann wird er nicht erneut hinzugefügt:
    mytext.classList.add("myClassName");
}

und wenn dann die Style-Angaben auch per Javascript erstellt werden sollen, kann man mit

style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);
style = document.styleSheets[document.styleSheets.length-1];

ein Style-Element anlegen, und mit

add = function(selector,rule) {
if( style.cssRules )
  style.insertRule(selector+" {"+rule+"}", 0);
else if ( style.rules ) 
  style.addRule(selector, rule);
}

Styleangaben einfügen. Im Einsatz habe ich das hier (auf die Fotosymbole klicken).
Und das Script

Gruß
Jürgen