createAttribute-Problem
Christopg
- javascript
hi, ich habe folgendes problem
ich möchte folgendes erreichen -->
<tr>
<td style="width: 160px;">Test</td>
</tr>
diese Tags möchte ich dynamisch (DOM) dazufügen. es funktioniert alles, bis auf das ich das style="width.... nicht setzen kann. ich habe dazu folgenden code -->
// alle notwendigen knoten erzeugen
var trNode1 = document.getElementsByTagName("tr")[0];
var tdNode1 = document.createElement("td");
var textNode1 = document.createTextNode("test");
// code für style setzen
var attrNode1 = document.createAttribute("style");
attrNode1.nodeValue = "width: 160px";
tdNode1.setAttributeNode(attrNode1);
// Knoten einhängen
tdNode1.appendChild(textNode1);
trNode1.appendChild(tdNode1);
sobald der code für das style setzen drinnen ist-funktioniert das ganze nicht mehr - was mache ich falsch - ich hab mich an die SELFHTML-DOKU gehalten
dort heisst es -->
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(Ausrichtung);
meiner meinung nach mache ich nichts anders - oder habe ich was übersehen???
danke schon im voraus
mfg, christoph
Hallo christoph
diese Tags möchte ich dynamisch (DOM) dazufügen. es funktioniert alles, bis auf das ich das style="width.... nicht setzen kann. ich habe dazu folgenden code -->
meiner meinung nach mache ich nichts anders - oder habe ich was übersehen???
Ja hast du. Das klappt nur im NN6 und wahrscheinlich auch im IE 6.
Siehe auch http://selfhtml.teamone.de/javascript/objekte/document.htm#create_attribute unter "Beachten Sie".
Im NN 6 konnte ich dein Beispiel problemlos nachvollziehen.
Viele Grüße
Antje
Hallo Christoph,
// code für style setzen
var attrNode1 = document.createAttribute("style");
attrNode1.nodeValue = "width: 160px";
tdNode1.setAttributeNode(attrNode1);
Das scheint der IE nicht zu moegen, auch diese Schreibweise nicht (wohl aber Mozilla):
tdNode1.setAttribute("style","width: 160px");
Alternative fuer IE und Mozilla:
tdNode1.style.width="160px";
Hier mal ein Beispiel mit einem leeren Absatz, dem ein SPAN mit Text xyz hinzugefuegt wird, wobei dessen style.color und style.fontWeight gesetzt werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function Test()
{
var doc=document.getElementsByTagName("p")[0];
var neuelem = document.createElement("span");
var neutxt = document.createTextNode("xyz");
//Funktioniert so in Mozilla, aber nicht im IE6
//neuelem.setAttribute("style","color: #FF0000; font-weight: bold");
//Funktioniert in Mozilla und IE6
neuelem.style.color="#FF0000";
neuelem.style.fontWeight="bold";
doc.appendChild(neuelem);
doc.firstChild.appendChild(neutxt);
}
//-->
</script>
</head>
<body onclick="Test()">
<p>Absatz</p>
</body>
</html>
Vielleicht kannst Du das als Workaround gebrauchen.
MfG, Thomas
Nachtrag:
<p>Absatz</p>
Den Absatz leer lassen, also <p></p>, sonst ist firstChild der Textinhalt. War beim Testen stehen geblieben.
MfG, Thomas