Matthias Apsel: Auslesen von style-Eigenschaften

SELF-Forum

Auslesen von style-Eigenschaften

Matthias Apsel Homepage des Autors
– Informationen zu den Bewertungsregeln

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

--
http://www.billiger-im-urlaub.de/kreis_sw.gif
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Auslesen von style-Eigenschaften

    LX
    – Informationen zu den Bewertungsregeln

    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

    --
    RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Auslesen von style-Eigenschaften

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@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'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Auslesen von style-Eigenschaften

        LX
        – Informationen zu den Bewertungsregeln

        @@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

        --
        RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Auslesen von style-Eigenschaften

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@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'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Auslesen von style-Eigenschaften

            LX
            – Informationen zu den Bewertungsregeln

            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

            --
            RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Auslesen von style-Eigenschaften

        Struppi Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        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.

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

  2. Auslesen von style-Eigenschaften

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@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'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Auslesen von style-Eigenschaften

      molily
      +1 Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Auslesen von style-Eigenschaften

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln