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

[piet]

Hallo,

ich bekomme von einer Funktion ua. eine Variable in der "font-weight:bold" für die anzuzeigenden HTML Elemente steht.

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

Wie kann ich nun mit der Info aus der Variable direkt, also ohne vergleichende "if ... then" den Inhalt der Variable gleich an "mytext" übergeben oder die irgendwie verbinden.

Ist sicher möglich .... sehe ich aber wieder nicht ...;-)

Gruß piet

[Felix Riesterer]

Lieber piet,

Du suchst wohl etwas in dieser Art:

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

mytext.style = myCssStuff;

Jedes HTMLElementObjekt kennt eine Eigenschaft style, welche selbst ein Objekt ist und welche CSS-Eigenschaften speichern kann, ähnlich wie das style-Attribut in HTML.

ABER:

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");
}

Liebe Grüße,

Felix Riesterer.

[piet]

Hallo Felix,

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

mytext.style = myCssStuff;

So sieht mein html-Element aus ... eine Klasse style gibt es schon

<span id="myid" style="position:absolute; visibility:hidden;"></span>

sollte es so einfach sein ??

Gruß piet

[Tabellenkalk]

Hallo,

So sieht mein html-Element aus ... eine Klasse style gibt es schon

sprichst du vom Attribut style? Schau doch mal ins Wiki

Gruß
Kalk

[Ottokar Wandelpunkt]

<span id="myid" style="position:absolute; visibility:hidden;"></span>

sollte es so einfach sein ??

Ja und nein. Erstmal ist das style-Attribut grundsätzlich fehl am Platze. CSS-Angaben solltest du, so es irgend geht, immer separat halten, zumindest in einem <style>-Block, besser noch in einer CSS-Datei.
Gerade bei Elementen mit id ist es doch ein Leichtes, sie CSS-seitig mit #myid {position:absolute; visibility:hidden;} zu bestücken.

In deinem speziellen Fall schaffst du dir mit dem style-Attribut zudem noch ein Problem. Es wäre einfach:

var myCssStuff = "font-weight:bold"; // eigentlich deine Funktion

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

Es ist bei dir aber nicht einfach, weil .style nicht irgendein Attribut ist, sondern in dieser Form identisch mit dem style-Attribut in HTML. Nach dem Ausführen des obigen Javascript-Schnippsels steht in deinem HTML-Code de facto dieses:

<span id="myid" style="font-weight:bold"></span>

Dir geht also die ursprüngliche style-Information verloren, da du sie Javascript-seitig mit der Zuweisung an .style überschreibst.

Einfach ist es hingegen, wenn du dir angewöhnst, wie eingangs beschrieben, vom HTML-style-Attribut die Finger zu lassen. Lagere die CSS-Daten, die du jetzt noch im HTML-Code stehen hast, in ein Stylesheet aus, da, wo sie hingehören – dann kannst du problemlos mittels Javascript CSS-Daten an .style zuweisen, ohne die Vorgaben zu überschreiben.

Davon unabhängig solltest du dir überlegen, ob du dem Element statt eines CSS-Wertes nicht lieber eine Klasse zuweisen und dein font-weight:bold in eine Klasse in einem Stylesheet auslagern möchtest, wie es Felix schon beschrieben hat. In Javascript hat CSS nämlich ebensowenig zu suchen wie in HTML.

[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