Unterschiede in der JavaScript-Syntax zwischen IE und Firefox_Javascript-Tipps

Obwohl die historischen Tage von JavaScript, in denen lange und lästige Codeblöcke zur Ausrichtung auf bestimmte Browser verwendet wurden, vorbei sind, ist die gelegentliche Verwendung einiger einfacher Codeblöcke und der Objekterkennung immer noch notwendig, um sicherzustellen, dass ein Teil des Codes auf dem Computer des Benutzers ordnungsgemäß funktioniert.

In diesem Artikel werde ich kurz sieben Aspekte der JavaScript-Syntax zwischen Internet Explorer und Firefox skizzieren.

1. CSS-Attribut „float“

Die grundlegende Syntax zum Abrufen spezifischer CSS-Eigenschaften für ein bestimmtes Objekt ist die Eigenschaft object.style, und Eigenschaften mit Bindestrich werden durch die Kamelnotation ersetzt. Um beispielsweise das Attribut „Hintergrundfarbe“ eines Div mit der ID „header“ abzurufen, verwenden wir die folgende Syntax:

Code kopieren Der Code lautet wie folgt:

document.getElementById("header").style.borderBottom = "1px solid #ccc";

Aber da „float“ ein reserviertes Wort in JavaScript ist, können wir object.style.float nicht verwenden, um das „float“-Attribut abzurufen. So verwenden wir es in zwei Browsern:

IE-Syntax:

Code kopieren Der Code lautet wie folgt:

document.getElementById("header").style.styleFloat = "links";

Firefox-Syntax:

Code kopieren Der Code lautet wie folgt:

document.getElementById("header").style.cssFloat = "links";

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. Holen Sie sich das „class“-Attribut des Elements

Ähnlich wie beim „float“-Attribut verwenden die beiden Browser unterschiedliche JavaScript-Methoden, um dieses Attribut zu erhalten.

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. Holen Sie sich das „for“-Attribut des Label-Tags

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

Das Ermitteln der Cursorposition eines Elements ist selten. Wenn dies erforderlich ist, ist die Syntax von IE und Firefox unterschiedlich. Dieser Beispielcode ist ziemlich einfach und wird normalerweise als Teil vieler komplexer Ereignishandler verwendet. Er wird hier nur zur Beschreibung der Unterschiede verwendet. Beachten Sie, dass die Ergebnisse im IE anders sind als in Firefox, daher gibt es bei diesem Ansatz einige Probleme. Normalerweise kann dieser Unterschied durch Ermitteln der „Scroll-Position“ ausgeglichen werden – 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;

6. Ermitteln Sie die Größe des Fensters oder Browserfensters

Manchmal müssen Sie die Größe des effektiven Fensterbereichs des Browsers ermitteln, der normalerweise als „Fenster“ bezeichnet wird.

IE-Syntax:

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;

Firefox-Syntax:

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

7. Alpha 透明

嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：

IE 语法：

 #myElement {
filter: alpha(opacity=50);
}

Firefox 语法：

 #myElement {
opacity: 0.5;
}

要使用 JavaScript 获取这些值，需要使用 style 对象：

IE 语法： 

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";

Firefox 语法：

var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";

当然，已经说到了，一般是在循环中间来改变 opcity/alpha，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现地。

7个方面在JavaScript语法上不同的点，希望对大家的学习有所帮助。