Différences de syntaxe JavaScript entre les astuces IE et Firefox_javascript

Bien que l'époque historique de JavaScript consistant à utiliser des blocs de code longs et ennuyeux pour cibler des navigateurs spécifiques soit révolue, l'utilisation occasionnelle de quelques blocs de code simples et la détection d'objets pour garantir que certains codes fonctionnent correctement sur la machine de l'utilisateur sont toujours nécessaires.

Dans cet article, je présenterai brièvement 7 aspects de la syntaxe JavaScript entre Internet Explorer et Firefox.

1. Attribut CSS « float »

La syntaxe de base pour obtenir des propriétés CSS spécifiques pour un objet donné est la propriété object.style, et les propriétés avec trait d'union sont remplacées par la notation camel. Par exemple, pour obtenir l'attribut background-color d'un div avec l'ID "header", nous utilisons la syntaxe suivante :

Copier le code Le code est le suivant :

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

Mais comme « float » est un mot réservé en JavaScript, nous ne pouvons pas utiliser object.style.float pour obtenir l'attribut « float ». Voici comment nous l'utilisons dans deux navigateurs :

Syntaxe IE :

Copier le code Le code est le suivant :

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

Syntaxe Firefox :

Copier le code Le code est le suivant :

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

2. Style de calcul des éléments

En utilisant l'object.style.property ci-dessus, JavaScript peut facilement obtenir et modifier le style CSS défini de l'objet. Mais la limitation de cette syntaxe est qu'elle ne peut obtenir que des styles en ligne en HTML ou des styles définis directement à l'aide de JavaScript. L'objet style ne peut pas obtenir les styles définis à l'aide de feuilles de style externes. Pour obtenir le "style calculé" d'un objet on utilise le code suivant :

Syntaxe IE :

var myObject = document.getElementById("header"); 
var myStyle = myObject.currentStyle.backgroundColor;

Syntaxe Firefox :

var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

3. Récupérez l'attribut "class" de l'élément

Similaire au cas de l'attribut "float", les deux navigateurs utilisent des méthodes JavaScript différentes pour obtenir cet attribut.

Syntaxe IE :

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

Syntaxe Firefox :

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4. Obtenez l'attribut « for » de la balise label

Comme 3, il existe également différentes syntaxes pour utiliser JavaScript pour obtenir l'attribut "for" de l'étiquette.

Syntaxe IE :

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");

Syntaxe Firefox :

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

La même syntaxe est utilisée pour la méthode setAtrribute.

5. Obtenir la position du curseur

Obtenir la position du curseur d'un élément est rare. Si vous devez le faire, la syntaxe d'IE et de Firefox est différente. Cet exemple de code est assez basique et est généralement utilisé dans le cadre de nombreux gestionnaires d'événements complexes. Il n'est utilisé ici que pour décrire les différences. Notez que les résultats dans IE sont différents de ceux de Firefox, cette approche pose donc quelques problèmes. Habituellement, cette différence peut être compensée en obtenant la "position de défilement" - mais c'est un sujet pour un autre article.

Syntaxe IE :

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;

Syntaxe Firefox :

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

6. Obtenez la taille de la fenêtre ou de la fenêtre du navigateur

Parfois, vous avez besoin de connaître la taille de l'espace de fenêtre effectif du navigateur, généralement appelé « fenêtre ».

Syntaxe IE :

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

Syntaxe Firefox :

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语法上不同的点，希望对大家的学习有所帮助。