nicht angemeldet
Style Proberties per Javascript auslesen
Hallo allerseits, :)
ich habe da ein Problem mit CSS/JS
hier erstmal nen Auszug ausm Quelltext.
=========================================
<head>
<style>
.kategorie {position:absolute;left:5;top:16;font-family:verdana;font-size:12pt;font-weight:bold;cursor:default;}
.text {position:absolute;left:220px;width:350;height:100;font-family:verdana;font-size:10px;cursor:default;}
</style>
<script language="javascript">
function test()
{
var textTop = document.getElementById('text_01').style.getAttribute("top","false");
var textLeft = document.getElementById('text_01').style.getAttribute("left","false");
alert(textTop);
alert(textLeft);
}
</script>
</head>
<body>
<div id="text_01" class="text" style="top:10">BlabAlbaBA</div>
<div id="text_02" class="text" style="top:30">BlabAlbaBA</div>
<a href="#" onclick="test();">test</a>
</body>
Nun folgendes Problem:
den ersten alert erhalte ich korrekt, ( 10 )
der zweite alert ist aber leer, was in sofern halbwegs logisch ist, weil ich in "text_01" ja keinen Wert für left zugewiesen habe, sondern dies über die class="text" geschieht.
meine Frage ist nun, wie kommme ich an den Left Wert ran?
ich hab mir gedacht per
document.styleSheet('text') ... aber weiter scheitert es bei mir
wäre nett wenn mir jemand nen wink mit nem Zaunpfahl geben könnte...
mfg Stephan
-
ja ich weis Properties ;)
-
Bongú!
Zunächst einmal muss ich leider sagen, dass ich dir bei deinem Problem nur wenig helfen kann.
Ich habe den von dir geposteten Quelltext übernommen und getestet.
Weder IE6, noch Mozilla 0.9.9 noch Opera 6.01 liefern das gewünschte Ergebnis.
Daraufhin habe ich die Abfrage der CSS-Eigenschaft ein wenig geändert/vereinfacht:
Statt:
var textTop = document.getElementById('text_01').style.getAttribute("top","false");
var textLeft = document.getElementById('text_01').style.getAttribute("left","false");schrieb ich:
var textTop = document.getElementById('text_01').style.top;
var textLeft = document.getElementById('text_01').style.left;Nach dieser Änderung war das Ergebnis im IE6 und Mozilla 0.9.9 dasselbe: Die im inline-Style definierte Eigenschaft (top) wird korrekt angezeigt, die per class zugewiesene (left) nicht.
ABER (man höre und staune!) anders im Opera 6.01. Dieser liefert mir nun beide Werte.
Berücksichtigen muss man hierbei allerdings, dass Opera _immer_ den Pixelwert (ohne Einheit) zurückliefert, egal ob in der CSS-Definition px, pt, em etc. angegeben wurde.
ich hab mir gedacht per
document.styleSheet('text') ... aber weiter scheitert es bei mirGibt's das? Ich kenne nur <file://localhost/E:/Tutorien/html/selfhtml8/javascript/objekte/htmlelemente.htm#style> und dies bringt in diesem Zusammenhang gar nichts.
wäre nett wenn mir jemand nen wink mit nem Zaunpfahl geben könnte...
Passe! :-(
Sahha,
kerki
-
Bongú!
Ich kenne nur <file://localhost/E:/Tutorien/html/selfhtml8/javascript/objekte/htmlelemente.htm#style> ...
Der war gut! :-)
http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#style
Der ist besser!
Sahha!
kerki
-
-
Hallo,
meine Frage ist nun, wie kommme ich an den Left Wert ran?
Mozilla (DOM-Methode):
var textLeft = document.defaultView.getComputedStyle(document.getElementById('text_01'),"").getPropertyValue("left");
// --> 220pxIE:
var textLeft = document.getElementById('text_01').currentStyle["left"];
// --> 220pxMfG, Thomas
-
Nachtrag:
Opera 6.01 liefert 220 (ohne px) bei:
var textLeft = document.getElementById('text_01').getAttribute("style")["left"];Mozilla 0.9.9 --> undefined
IE 6 --> ""MfG, Thomas
-
Bongú!
Noch eine Ergänzung:
Netscape 4.72 (WIN) liefert 220 (ohne px) bei:
var textLeft = document.layers['text_01'].left;Jetzt haben wir ja bald alle Browser zusammen.
Wie sieht es z.B. mit IE4 aus?
Klappt folgendes:
var textLeft = document.all.text_01.style.pixelLeft; ?Im IE6 klappt es damit nicht. Einen IE4 hab' ich nicht.
Sahha,
kerki
-
Hallo,
Wie sieht es z.B. mit IE4 aus?
Klappt folgendes:
var textLeft = document.all.text_01.style.pixelLeft; ?Im IE6 klappt es damit nicht. Einen IE4 hab' ich nicht.
Kann ich auch gerade nicht testen. Das currentStyle-Objekt gibt es erst ab IE5. Das style-Objekt referenziert nur einzelne Inline-Styles, ebenso object.style.cssText, was alle Inline-Styles enthaelt.
Bei der Schreibweise der ID sollte man noch beachten, dass Unterstriche in IDs und CLASSes zwar mittlerweile erlaubt sind, aber vielleicht doch mancher Browser damit Probleme hat [in diesem Fall (IE5+, NN 4.x, Mozilla, Opera) scheinbar nicht].
Da wir hier nun schon fast alle (un)moeglichen Style-Zugriffsmethoden beisammen haben, fuege ich mal noch des IEs runtimeStyle hinzu. Das ist das schreibende Gegenstueck zu currentStyle:
Die left-Eigenschaft kann man damit zur Laufzeit auf diesen Wegen aendern:
document.all.text_01.runtimeStyle["left"]="150px";
oder
var textLeft = document.getElementById('text_01').runtimeStyle["left"]="150px";BTW: DOM-konform waere statt runtimeStyle:
object.getStyle().setProperty("eigenschaft","wert")
Das ist z. B. in SVG-Dokumenten anwendbar.MfG, Thomas
-
-
-