Auch wenn die Zeiten, in denen JavaScript lange und langweilige Codeblöcke zur Ausrichtung auf bestimmte Browser verwendet hat, vorbei sind, ist es immer noch notwendig, gelegentlich einige einfache Codeblöcke und die Objekterkennung zu verwenden, um sicherzustellen, dass ein Teil des Codes auf dem Computer des Benutzers korrekt funktioniert.
In diesem Artikel werde ich sieben Unterschiede in der JavaScript-Syntax zwischen Internet Explorer und Firefox skizzieren.
1. CSS-Eigenschaft „float“.
Die grundlegende Syntax zum Abrufen einer bestimmten CSS-Eigenschaft eines bestimmten Objekts ist die Eigenschaft object.style. Für Eigenschaften mit Bindestrich wird stattdessen die Camel-Notation verwendet. Um beispielsweise das Attribut „Hintergrundfarbe“ eines Div mit der ID „header“ abzurufen, müssen wir die folgende Syntax verwenden:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
Da „float“ jedoch ein reserviertes Wort in JavaScript ist, können wir object.style.float nicht verwenden, um das „float“-Attribut abzurufen. So verwenden wir es in beiden Browsern:
IE-Syntax:
document.getElementById("header").style.styleFloat = "left";
Firefox-Syntax:
document.getElementById("header").style.cssFloat = "left";
2. Berechnungsstil der Elemente
Durch die Verwendung der oben genannten object.style.property kann JavaScript den festgelegten CSS-Stil des Objekts einfach abrufen und ändern. Die Einschränkung dieser Syntax besteht jedoch darin, dass sie nur Inline-Stile in HTML oder direkt mit JavaScript festgelegte Stile abrufen kann. Das Stilobjekt kann keine mit externen Stylesheets festgelegten Stile abrufen. Um den „berechneten Stil“ eines Objekts zu erhalten, verwenden wir den folgenden Code:
IE-Syntax:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
Firefox-Syntax:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. Rufen Sie das „class“-Attribut des Elements ab
Ähnlich wie beim „float“-Attribut verwenden die beiden Browser unterschiedliche JavaScript-Methoden, um dieses Attribut abzurufen.
IE-Syntax:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox-Syntax:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. Das Abrufen des „for“-Attributs des Labels
erfolgt auf die gleiche Weise wie 3. Die Verwendung von JavaScript zum Abrufen des „for“-Attributs des Labels hat ebenfalls eine andere Syntax.
IE-Syntax:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Firefox-Syntax:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
Die gleiche Syntax wird für die setAtrribute-Methode verwendet.
5. Ermitteln Sie die Cursorposition
. Es kommt selten vor, dass die Cursorposition eines Elements ermittelt wird. Wenn dies erforderlich ist, unterscheidet sich auch die Syntax von IE und Firefox. Dieser Beispielcode ist ziemlich einfach und wird normalerweise als Teil vieler komplexer Ereignishandler verwendet und dient nur der Beschreibung der Unterschiede. Es ist zu beachten, dass sich die Ergebnisse im IE von denen in Firefox unterscheiden, sodass es bei dieser Methode einige Probleme gibt. Oft lässt sich dieser Unterschied durch die Festlegung der „Scroll-Position“ ausgleichen – aber das ist ein Thema für einen anderen Artikel.