In diesem Artikel werde ich kurz einige Aspekte der JavaScript-Syntax skizzieren, die sich zwischen Internet Explorer und Firefox unterscheiden.
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.
„
Hintergrundfarbe“ eines Divs mit der ID „header“ zu erhalten, müssen wir die folgende Syntax verwenden:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
„float“ ist ein für JavaScript reserviertes Wort. Wir können 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. Berechneter Stil des Elements
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. Rufen Sie das „for“-Attribut des Labels ab
Wie bei 3 gibt es auch unterschiedliche Syntaxen für die Verwendung von JavaScript, um das „for“-Attribut des Labels abzurufen.
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. Cursorposition ermitteln
Es kommt selten vor, die Cursorposition eines Elements zu ermitteln, und wenn Sie dies tun müssen, ist die Syntax in IE und Firefox unterschiedlich. 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.
IE-Syntax:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
Firefox-Syntax:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;