Même si l'époque où JavaScript utilisait des blocs de code longs et ennuyeux pour cibler des navigateurs spécifiques est révolue, il est toujours nécessaire d'utiliser occasionnellement quelques blocs de code simples et la détection d'objets pour garantir que certains codes fonctionnent correctement sur la machine de l'utilisateur.
Dans cet article, je décrirai 7 manières dont la syntaxe JavaScript diffère entre Internet Explorer et Firefox.
1. Propriété CSS « float »
La syntaxe de base pour obtenir une propriété CSS spécifique d'un objet donné est la propriété object.style, et les propriétés avec trait d'union utilisent à la place la notation camel. Par exemple, pour obtenir l'attribut background-color d'un div avec l'ID « header », nous devons utiliser la syntaxe suivante :
document.getElementById("header").style.borderBottom= "1px solid #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 les deux navigateurs :
Syntaxe IE :
document.getElementById("header").style.styleFloat = "gauche";
Syntaxe Firefox :
document.getElementById("header").style.cssFloat = "gauche";
2. Style de calcul des éléments
En utilisant le 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 monObject = document.getElementById("header");
var monStyle = monObjet.currentStyle.backgroundColor;
Syntaxe Firefox :
var monObject = document.getElementById("header");
var monComputedStyle = document.defaultView.getComputedStyle(monObject, null);
var monStyle = monComputedStyle.backgroundColor;
3. Récupérez l'attribut "class" de l'élément
Semblable au cas de l'attribut "float", les deux navigateurs utilisent des méthodes JavaScript différentes pour obtenir cet attribut.
Syntaxe IE :
var monObject = document.getElementById("header");
var monAttribute = monObjet.getAttribute("className");
Syntaxe Firefox :
var monObject = document.getElementById("header");
var monAttribute = monObjet.getAttribute("classe");
4. L'obtention de l'attribut « pour » de l'étiquette
est la même chose que 3. L'utilisation de JavaScript pour obtenir l'attribut « pour » de l'étiquette a également une syntaxe différente.
Syntaxe IE :
var myObject = document.getElementById("myLabel");
var monAttribute = monObjet.getAttribute("htmlFor");
Syntaxe Firefox :
var monObjet = 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
Il est rare d'obtenir la position du curseur d'un élément. Si vous devez le faire, la syntaxe d'IE et de Firefox est également 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 et n'est utilisé que pour décrire les différences. Il convient de noter que les résultats dans IE sont différents de ceux de Firefox, cette méthode pose donc quelques problèmes. Souvent, cette différence peut être compensée en obtenant la « position de défilement » - mais c'est un sujet pour un autre article.