Bien que la période de l'historique de JavaScript d'utiliser des blocs de code longue et ennuyeuse pour cibler les navigateurs spécifiques soit terminée, il est toujours nécessaire d'utiliser occasionnellement des blocs de code simples et une détection d'objets pour s'assurer que certains code fonctionnent correctement sur les machines utilisateur.
Dans cet article, je décrirai brièvement les 7 aspects différents de la syntaxe JavaScript entre Internet Explorer et Firefox.
1. Attribut CSS «Float»
La syntaxe de base pour obtenir un attribut CSS spécifique d'un objet donné est l'attribut objet.style, et les attributs avec trait d'union doivent être remplacés par la nomenclature de chameaux. Par exemple, pour obtenir la propriété en couleur d'arrière-plan d'une div avec "en-tête", nous devons utiliser la syntaxe suivante:
La copie de code est la suivante: document.getElementById ("En-tête"). Style.BorterBottom = "1Px Solid #ccc";
Cependant, comme "Float" est un mot réservé pour JavaScript, nous ne pouvons pas utiliser object.style.float pour obtenir l'attribut "float". Voici comment nous l'utilisons dans deux navigateurs:
IE Syntaxe:
La copie de code est la suivante: document.getElementById ("En-tête"). Style.stylefloat = "Left";
Syntaxe de Firefox:
La copie de code est la suivante: document.getElementById ("En-tête"). Style.cssfloat = "Left";
2. Style de calcul des éléments
En utilisant l'objet ci-dessus.style.property, JavaScript peut facilement obtenir et modifier le style CSS de l'objet. Cependant, la limitation de cette syntaxe est qu'elle ne peut obtenir que des styles en ligne en HTML, ou utiliser directement JavaScript pour définir des styles. L'objet de style ne peut pas obtenir des styles à l'aide d'une feuille de style externe. Pour obtenir le "style calculé" de l'objet, nous utilisons le code suivant:
IE Syntaxe:
var myObject = document.getElementById ("En-tête"); var mystyle = myObject.currentStyle.backgroundColor;Syntaxe de Firefox:
var myObject = document.getElementById ("en-tête"); var myComputedStyle = document.defaultView.getCompuledStyle (myObject, null); var mystyle = myCompuledStyle.backgroundColor;3. Obtenez l'attribut "classe" de l'élément
Semblable au cas de l'attribut "float", les deux navigateurs utilisent différentes méthodes JavaScript pour obtenir cet attribut.
IE Syntaxe:
var myObject = document.getElementById ("en-tête"); var myAttribute = myObject.getAttribute ("className");Syntaxe de Firefox:
var myObject = document.getElementById ("en-tête"); var myAttribute = myObject.getAttribute ("class");4. Obtenez l'attribut "pour" de la balise d'étiquette
Comme 3, il existe différentes syntaxes pour utiliser JavaScript pour obtenir l'attribut "pour" d'une étiquette.
IE Syntaxe:
var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("htmlfor");Syntaxe de Firefox:
var myObject = document.getElementById ("myLabel"); var myAttribute = myObject.getAttribute ("for");La même syntaxe est également vraie pour la méthode SetAttribute.
5. Obtenez 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 traitements d'événements complexes, et n'est utilisé que pour décrire les différences ici. Il convient de noter que les résultats dans IE sont différents de ceux de Firefox, donc cette méthode a quelques problèmes. Habituellement, cette différence peut être compensée en obtenant la "position de défilement" - mais c'est le sujet d'un autre article.
IE Syntaxe:
var myCursorPosition = [0, 0]; myCursorPosition [0] = event.clientx; myCursorPosition [1] = event.clienty;
Syntaxe de 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, il est nécessaire de découvrir la taille de l'espace de fenêtre efficace du navigateur, qui est généralement une "fenêtre".
IE Syntaxe:
var MyBrowsSeSize = [0, 0]; MyBrowsSize [0] = document.DocumentElement.ClientWidth; MyBrowsSize [1] = document.DocumentElement.ClientHeight;
Syntaxe de Firefox:
var MyBrowsSeSize = [0, 0]; MyBrowsSize [0] = Window.InnerWidth; MyBrowsSize [1] = Window.InnerHeight;
7. Alpha transparent
Eh bien, ce n'est pas en fait un projet de syntaxe pour JavaScript - la transparence alpha est définie via CSS. Cependant, lorsque l'objet est réglé pour s'estomper dans et sortir via JavaScript, cela doit être réalisé en obtenant les paramètres alpha du CSS, qui est généralement à l'intérieur de la boucle. Pour modifier le code CSS avec le JavaScript suivant:
IE Syntaxe:
#MyElement {filtre: alpha (opacité = 50);}Syntaxe de Firefox:
#MyElement {Opacité: 0,5;}Pour obtenir ces valeurs en utilisant JavaScript, vous devez utiliser un objet de style:
IE Syntaxe:
var myObject = document.getElementById ("myelement"); myObject.style.filter = "alpha (opacité = 80)";Syntaxe de Firefox:
var myObject = document.getElementById ("myelement"); myObject.style.opacity = "0,5";Bien sûr, il a été mentionné qu'il s'agit généralement de modifier l'opcité / alpha au milieu d'une boucle pour créer des effets d'animation, mais c'est un exemple simple, juste pour décrire clairement comment la méthode est mise en œuvre.
Il y a 7 points différents dans la syntaxe JavaScript en termes de JavaScript, j'espère que cela sera utile à l'apprentissage de tout le monde.