[CSS/DOM] style.left undefined
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
beitrag
bestehen
dom
eigenschaft
element
experiment
funktion
group
methode
nochmal
null
opus
schreiten
style
tag
test
tutorial
vielen dank
zugreifen
-
Hallo Leute, kann mir jemand sagen warum im folgenden Code tag/style">style.left undefined ist?
Die Eigenschaft wird im Stylebereich im Kopf gesetzt. Beim Zugriff auf die Eigenschaft mittels JavaScript/DOM wird jedoch '' zur?ckgegeben, so als w?re die Eigenschaft nicht gesetzt worden.Die Auswirkung der Eigenschaft ist aber sichtbar.
<html> <head> <style type="text/css"> div{ position:absolute; width:100px; height:100px; left:100px; //hier wird left gesetzt background-color:red; } </style> <script type="text/javascript"> function getLeft(){ alert("getLeft()"); // Beim ersten Funktionsaufruf ist style.left undefined. // Die Auswirkung der Eigenschaft sind aber zu sehen. alert(document.getElementById("theDiv").style.left); // Erst nach dem Setzen per DOM ist der Wert auch definiert. document.getElementById("theDiv").style.left = "200px"; } </script> <title>Style-Test</title> </head> <body> <div id="theDiv" onclick="javascript:getLeft()"></div> </body> </html>
zum schnellen Ausprobieren:
http://noll.milten.lima-city.de/style.html
Das Problem besteht bei mir bei IE, FF und Opera. Mehr habe ich nicht probiert.
Vielen Dank schon mal im Voraus.
Constantin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
das Problem ist, dass die CSS-Styles nicht ?bernommen werden. Du m?sstest die Styles zuerst mit Javascript ?bergeben.
mfg,
hr -
Hei?t das, ich m??te jede Eigenschaft, auf die ich sp?ter zugreifen m?chte vorher nochmals mit JS/DOM setzen?
Ich meine das Beispiel, das ich eingestellt habe ist nat?rlich nur eine Vereinfachung meines Problems ich m?chte auf einige Werte zugreifen, da w?re eine Menge 'unn?te' Arbeit f?llig. Und das CodeDesign wird dadurch auch nicht besser.
Ich will Dich nicht angreifen, Du bist nur gerade der ?berbringer schlechter Nachrichten
-
Hi,
ich hab noch bei Selfhtml ein bischen rumgeschaut, aber es scheint wirklich so zu sein, als ob Javascript die CSS-Styles nicht ?bernimmt, ausser sie stehen in der style-Eigenschaft des Tags (style="...").
Tut mir leid, dass ich dir nicht weiterhelfen kann.
mfg,
hr -
Dennoch vielen Dank und weiter geholfen hast Du mir ja schon. Du kannst ja nix daf?r, wenn das so implementiert ist.
Ich glaub ich versuche es nochmal in der NG, vielleicht kann man mir da sagen warum das so ist.
Gru?
Constantin -
So, ich hab Nachricht von der NG.
http://groups.google.de/group/de.comp.lang.javascript/browse_frm/thread/0d91aea382551c6e/3ad7df65304b8fe4#3ad7df65304b8fe4
Der Zugriff auf die Werte ist m?glich. Der Code mu? folgenderma?en ver?ndert werden.
<html> <head> <style type="text/css"> div{ position:absolute; width:100px; height:100px; left:100px; //hier wird left gesetzt background-color:red; } </style> <script type="text/javascript"> function getLeft(){ alert("getLeft()"); var element = document.getElementById("theDiv"); // Auslesen mit DOM2 if (element.ownerDocument && element.ownerDocument.defaultView && element.ownerDocument.defaultView.getComputedStyle){ alert(element.ownerDocument.defaultView.getComputedStyle(element, null).left); } // Auslesen mit IE DOM if (element.currentStyle){ alert(element.currentStyle.left); } // Setzen des Wertes element.style.left = "200px"; } </script> <title>Style-Test</title> </head> <body> <div id="theDiv" onclick="javascript:getLeft()"></div> </body> </html>
Warum das so ist mu? ich erst noch nachvollziehen. W?rde denn Interesse an einem Tutorial bestehen? -
Hallo,
vielleicht hilft ja bei deinen Experimenten, dass der zweite Parameter, mit dem du die Funktion getComputedStyle aufrufst besser der leere String als null sein sollte, da die Funktion einen String erwartet.
https://bugzilla.mozilla.org/show_bug.cgi?id=63281
Noch viel Spa? mit diesem auch f?r mich interessanten Thema.
Gru?
Manni
Beitrag ge?ndert am 3.08.2006 23:32 von bandi999
Beitrag ge?ndert am 3.08.2006 23:32 von bandi999
Beitrag ge?ndert am 3.08.2006 23:33 von bandi999
Beitrag ge?ndert am 3.08.2006 23:33 von bandi999
Beitrag ge?ndert am 4.08.2006 00:03 von bandi999
Beitrag ge?ndert am 4.08.2006 00:04 von bandi999
Beitrag ge?ndert am 4.08.2006 00:05 von bandi999
Beitrag ge?ndert am 4.08.2006 00:05 von bandi999
Beitrag ge?ndert am 4.08.2006 00:06 von bandi999
Beitrag ge?ndert am 4.08.2006 00:17 von bandi999
Beitrag ge?ndert am 4.08.2006 00:17 von bandi999
Beitrag ge?ndert am 4.08.2006 00:20 von bandi999
Beitrag ge?ndert am 4.08.2006 00:22 von bandi999
Beitrag ge?ndert am 4.08.2006 00:23 von bandi999 -
Hi,
So, ich hab Nachricht von der NG.
http://groups.google.de/group/de.comp.lang.javascript/browse_frm/thread/0d91aea382551c6e/3ad7df65304b8fe4#3ad7df65304b8fe4
Der Zugriff auf die Werte ist m?glich. Der Code mu? folgenderma?en ver?ndert werden.
[...]
Warum das so ist mu? ich erst noch nachvollziehen. W?rde denn Interesse an einem Tutorial bestehen?
Aha, echt interessant, dass es doch eine M?glichkeit gibt. Das mit dem currentStyle wusste ich, ich war mir jedoch nicht sicher, ob es das richtige ist. Ausserdem funktioniert es nur mit dem IE.
Ich nehme an, dass die objekte in element.ownerDocument eine Art Zusatz zum DOM sind und deswegen nicht wirklich bekannt sind.
Der Code hier ist einfach zu erkl?ren:
if (element.ownerDocument && element.ownerDocument.defaultView && element.ownerDocument.defaultView.getComputedStyle) { alert(element.ownerDocument.defaultView.getComputedStyle(element, null).left); }
Hier wird einfach ?berpr?ft, ob die Methode element.ownerDocument.defaultView.getComputedStyle existiert, indem man Schritt f?r Schritt die Verschachteten Objekte auf ihre existens ?berpr?ft, sodass kein JavaScript-Error ausgel?st wird. Wenn die Methode existiert wird sie dann schliesslich angezeigt.
mfg,
hr
Beitrag ge?ndert am 4.08.2006 12:08 von heavyraptor -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage