„getComputedStyle” für alle Browser
^{Kristof Lipfert
Dipl.-Des.(FH)}

Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und CSS für alle Browser, getComputedStyle

Bevor versucht werden kann die Methode „getComputedStyle” für alle Browser in eine einheitliche Syntax umzusetzen gilt es erstmal die verschiedenen Möglichkeiten der jeweiligen Browser zu betrachten.

First step to look for a common way using „getComputedStyle” at all browsers is examining the browsers abilities.

Ersatzmethoden für getComputedStyle

Mit getComputedStyle wird, anders als bei einer Abfrage der Werte eine Stylesheets, auch der dynamisch per JavaScript veränderte Wert einer Styleeigenschaft aktuell abfragbar. Als konkretes Beispiel dient hier die Abfrage der Eigenschaft backgroundColor, die bei verbreiteten Browsern wie auch dem Netscape 4 veränderbar ist, allerdings ist das Beispiel bei Opera wegen der schlechten DHTML Unterstützung bis Version 6 nicht anwendbar, und Netscape 6 ist bei der Syntax von getComputedStyle besonders kritisch.

With getComputedStyle it is possible to access the actual style properties after dynamically changes from JavaScript. As sample the backgroundColor property is used here which is changeable at Netscape 4. But Opera fails here and Netscape 6 is critical about the syntax of getComputedStyle.

/*  Autor 2002 Kristof Lipfert, Duesseldorf                 */
 
var Farbe;
 
if(window.getComputedStyle)
   Farbe=
     window.getComputedStyle(document.getElementById("sample"),
                    "" ).getPropertyValue("background-color");
 
else if(document.getElementById("sample").currentStyle)
   Farbe=
 document.getElementById("sample").currentStyle.backgroundColor;
 
else if(document.ids)
   Farbe=
                              document.layers["sample"].bgColor;
 
else if(document.all)
    Farbe=
                        document.all.sample.style.backgroundColor;
 

Wegen der verschiedenen Browser sind bereits vier verschiedene Schreibweisen nötig. Für neuere Mozilla ist auch noch eine weitere, kürzere Variante möglich; dabei werden die Farbangaben browserintern ebenfalls in verschiedener Syntax verwaltet, und wie im letzen Beispiel bei Mozilla erkennbar manchmal sogar abweichend ermittelt:

Four different ways of coding are needed, and in addition the internal browser vars may differ:

backgroundColor und getComputedStyle

Um eine abgefragte Farbangabe nur zu merken und ggf. wieder zu setzen ist eine mögliche Übersetzung der Farbangaben erstmal gar nicht nötig:

To remember an questioned color and to apply the related style again a possible translation of that color shemes is not needen:

if(document.getElementById)
  document.getElementById("sample").style.backgroundColor=Farbe;
 
else if(document.ids)
  document.layers["sample"].bgColor=Farbe;
 
else if(document.all)
  document.all["sample"].style.backgroundColor=Farbe;
 

Konvertierung

Aber machmal wird eine Umrechnung der per JavaScript ausgegeben backgroundColor in ein bestimmtes Format doch benötigt. Mit der folgenden Methode liegen hier nach der Umwandlung die vorher abgefragten Farbwerte in einer einheitlichen Syntax im hexadezimalen Format vor:

But sometimes a conversion of the given JavaScript backgroundColor into a certain sheme is needed. With the described method all requested values are converted into the hexadecimal system:

/*  Autor 1999, 2002 (c) Kristof Lipfert, Duesseldorf      */
 
 if( document.ids )
    Farbe=
     "#00000".substr(0,(7-Farbe.toString(16).length))+
            Farbe.toString(16))
 
 else if( Farbe.indexOf('rgb')>-1){
    Farbe=
       Farbe.split("(")[1].split(")")[0].split(",");
    for(i=0;i<3;i++){
       Farbe[i]=(Farbe[i]*1).toString(16);
                    }
      Farbe="#"+Farbe.join("");
   }
 

Bei getComputedStyle und den Ersatzlösungen müssen also u.U. neben der eigentlichen Abfrage auch die vom Browser ausgegebenen Werte angepasst werden. Falls im vorliegenden Beispiel mit Farbnamen gearbeitet werden sollte, wäre auch noch ein Array mit Farbnamen und Werten zu berücksichtigen.

To use getComputedStyle at all browsers means different requests and a conversion of the requested values from the different browsers. To work with color names too an additional array of names and values would be needed.

getComputedStyle Beispiel

Autor, Entwicklung

© Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 07/2002 Redesign 2004