Auslesen von style-Eigenschaften

[Matthias Apsel]

Om nah hoo pez nyeetz, alle!

Ich möchte per CSS den Wert der Eigenschaft position auslesen. Gesucht ist best practice.

#1# foo.style.position, setzt inline-style-Angaben voraus

#2# getComputedStyle(foo,"").position können IE<9 nicht, die können dafür foo.currentStyle.position, das setzt irgendwie eine Browserweiche voraus.

Wie macht mans am besten?

Matthias

[LX]

Die Best Practice ist in diesem Fall eine Feature Detection. Gesetzt den Fall, dass in der Variable node ein Verweis auf genau das Element, dessen position-Eigenschaft Du auslesen willst, sieht Dein JS-Code folgendermaßen aus:

alert((window.getComputedStyle ? getComputedStyle(node,'') : node.currentStyle).position);

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

alert((window.getComputedStyle ? getComputedStyle(node,'') : node.currentStyle).position);

In Browsern, die weder window.getComputedStyle noch node.currentStyle kennen, gibt das wohl einen Laufzeitfehler.

Qapla'

[LX]

@@LX:
In Browsern, die weder window.getComputedStyle noch node.currentStyle kennen, gibt das wohl einen Laufzeitfehler.

Dann nenne mir mal einen, der es noch verdient hat, dass man auf ihn Rücksicht nimmt :-)

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Dann nenne mir mal einen, der es noch verdient hat, dass man auf ihn Rücksicht nimmt :-)

Nichtgrafische Browser wie Lynx?

Also meine Herren, wenn schon feature detection, dann richtig! ;-)

Qapla'

[LX]

Sehr lustig. Da Lynx überhaupt kein JS ausführt, kommt es auch nicht zu den von Dir beschriebenen Fehlern; insofern ist die zusätzliche Erkennung überflüssig.

Außerdem muss man undefined nicht direkt in den Code schreiben, genausogut würde reichen:

((window.getComputedStyle ? getComputedStyle(node,'') : node.currentStyle) || {}).position

Wobei ich das wie gesagt immer noch für überflüssig halte. Das sehe ich so ähnlich wie die Unterscheidungen für den Quirks Mode (wer den benutzt, gehört auch nicht noch unterstützt).

Gruß, LX

[Struppi]

In Browsern, die weder window.getComputedStyle noch node.currentStyle kennen, gibt das wohl einen Laufzeitfehler.

Browser die weder das eine noch das andere können, dürften kaum bis zu diesem Punkt kommen.

Surf mal mit einem Netscape 3 mit eingeschaltetem JS!
Du wirst nicht mehr aufhören, Fehlermeldungen wegzuklicken und wenn du Glück hast stürzt er vorher ab. Ähnlich dürfte es mit einem IE 4 sein.

Abwärtskompatibilität hat auch sein Grenzen.

Struppi.

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

#1# foo.style.position, setzt inline-style-Angaben voraus

Pfui.

#2# getComputedStyle(foo,"").position können IE<9 nicht, die können dafür foo.currentStyle.position, das setzt irgendwie eine Browserweiche voraus.

Wie macht mans am besten?

Wie immer: Nicht per Abfage des Browsers, sondern per Abfrage der Fähigkeiten.

if (getComputedStyle)  
  var position = getComputedStyle(foo,"").position;  
else if (foo.currentStyle)  
  var position = foo.currentStyle.position;

was sich auch als Einzeiler notieren lässt:

var position = getComputedStyle ? getComputedStyle(foo,"").position : (foo.currentStyle ? foo.currentStyle.position : undefined);

Qapla'

[molily]

Das Problem ist, dass currentStyle nicht wirklich mit getComputedStyle identisch ist. Es gibt einem eben nicht den »computed style«, sondern einen Wert in einer beliebigen Einheit. Beispielsweise werden Prozentwerte als Prozentwerte zurückgegeben anstatt als Pixelwerte, wie es Opera und Firefox bei getComputedStyle tun. Zu allem Überfluss geben Chrome und Safari manche Prozentwerte ebenfalls als solche wieder (z.B. left), andere als Pixelwerte (z.B. font-size).

Will man diesen Quirks beachten, kommt man mit einem Einzeiler nicht weit. Zudem gibt es für viele CSS-Eigenschaften einfach bessere Äquivalente, z.B. offsetWidth/offsetHeight, vgl. http://www.quirksmode.org/dom/w3c_cssom.html#elementview.

Mathias

[Matthias Apsel]

Om nah hoo pez nyeetz, molily!

Das Problem ist, dass currentStyle nicht wirklich mit getComputedStyle identisch ist. Es gibt einem eben nicht den »computed style«, sondern einen Wert in einer beliebigen Einheit. Beispielsweise werden Prozentwerte als Prozentwerte zurückgegeben anstatt als Pixelwerte, wie es Opera und Firefox bei getComputedStyle tun. Zu allem Überfluss geben Chrome und Safari manche Prozentwerte ebenfalls als solche wieder (z.B. left), andere als Pixelwerte (z.B. font-size).

Bei meinen Versuchen hab das dann auch wieder sein gelassen. Allerdings kann man mit getComputedStyle wohl recht zuverlässig IE6 - 8 identifizieren.

Matthias