Dans cet article, je présenterai brièvement plusieurs aspects de la syntaxe JavaScript qui diffèrent 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"
; "float" est un mot réservé 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 = "left"
Syntaxe Firefox :
document.getElementById("header").style.cssFloat = "left"
2. Style calculé de l'élément
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 myStyle = myComputedStyle.backgroundColor;
3. Récupère 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 myAttribute = myObject.getAttribute("class");
4. Récupère l'attribut "for" de l'étiquette.
Comme pour le point 3, il existe également différentes syntaxes permettant d'utiliser JavaScript pour obtenir l'attribut "for" de l'étiquette.
Syntaxe IE :
var monObjet = 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. Obtenez la position du curseur
Obtenir la position du curseur d'un élément est rare, et si vous en avez besoin, la syntaxe est différente dans IE et Firefox. 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.
Syntaxe IE :
var maPositionCurseur = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY ;
syntaxe Firefox :
var maPositionCurseur = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;