Comment gérer les problèmes de compatibilité dans JS

Cet article explique principalement comment gérer les problèmes de compatibilité dans JS. J'espère qu'il pourra vous aider.

1. Concernant les problèmes de compatibilité liés à l'obtention des styles hors ligne currentStyle et getComputedStyle
Nous savons tous que js ne peut pas obtenir- styles hors ligne via style Style, lorsque nous avons besoin d'obtenir le style hors ligne :
Nous obtenons généralement le style hors ligne grâce à ces deux méthodes :
Sous IE : currentStyle
Sous Chrome, FF : getComputedStyle(op,false)
Compatible avec les deux navigateurs :
if(op.currentStyle){
alert(op.currentStyle.width);
}else{
alert(getComputedStyle (op,false).width);
}
*Remarque : lors de la résolution de nombreuses méthodes d'écriture de compatibilité, if..else..

Encapsuler une fonction pour obtenir un style hors ligne : (compatible avec tous les navigateurs, y compris les versions inférieures IE6,7)
funtion getStyle(obj,name){
if( obj.currentStyle){
                                                                                                                                    se{
// chrom, FF
Retour getComputestyle (obj, false) [nom]; }
}
Appel : getStyle(op,'width');

2. Concernant les problèmes de compatibilité qui surviennent lors de l'utilisation de "index" pour obtenir chaque élément d'une chaîne :
Il y a aussi des problèmes avec les chaînes Semblable à un tableau, obtenez la valeur de chaque élément via un index d'indice,
var str="abcde";
aletr(str[1 ]);
Mais les navigateurs de versions inférieures IE6 et 7 ne sont pas compatibles
Méthode de compatibilité : str.charAt(i) //Tous les navigateurs sont compatibles
var str="abcde";
for(var i=0;i
alert(str. charAt( i)); //Remettez chaque élément dans la chaîne
}


3. À propos de l'obtention de childNodes dans DOM Problèmes de compatibilité avec les nœuds enfants
childNodes : Obtenir les nœuds enfants,
--IE6-8 : Obtenir les nœuds d'élément, normal
--Navigateurs de version supérieure : Mais il contiendra des nœuds de texte et des nœuds d'éléments (pas normal)
Solution : Utilisez nodeType : le type de nœud et portez un jugement
--nodeType=3-->Nœud de texte
--nodeTyPE=1-->Nœud d'élément
Exemple : Obtenez ul Tous les nœuds enfants dans dessus, rendez la couleur d'arrière-plan de tous les nœuds enfants rouges
Obtenez la méthode compatible des nœuds enfants de l'élément :
var oUl=document.getElementById(' ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType ==1) {
oUl.childNodes[i].style.background='red';
}
}
Remarque : les problèmes causés par childNodes ci-dessus peuvent être complètement remplacés par l'attribut children.
attribut enfants : obtenez uniquement les nœuds d'éléments, pas les nœuds de texte, compatible avec tous les navigateurs,
Il est plus facile à utiliser que ce qui précède, donc quand nous avons habituellement des enfants nœuds, il est préférable d'utiliser l'attribut children.
var oUl=document.getElementById('ul');
oUl.children.style.background="red";



4. Concernant les problèmes qui surviennent lors de l'utilisation de firstChild, lastChild, etc. pour obtenir le premier/dernier nœud d'élément
-- IE6 -8 fois : firstChild, lastChild, nextSibling, previousSibling, obtenez le premier nœud d'élément
(Les navigateurs de version supérieure IE9+, FF, Chrome ne sont pas compatibles et le nœud de texte vide qu'ils obtiennent)
--Sous les navigateurs de versions supérieures : firstElementChild, lastElementChild, nextElementSibling, previousElementSibling
(les versions inférieures des navigateurs IE6-8 ne sont pas compatibles)
--Méthode d'écriture compatible : recherchez le premier nœud d'élément de ul et changez sa couleur d'arrière-plan en rouge
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//Navigateur version supérieure
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}

5 . utilisation d'objets événementiels, des problèmes de compatibilité surviennent
Par exemple : Obtenir la position de la souris
IE/Chrom : event.clientX;event.clientY
FF/IE9 ou supérieur/Chrom : Passer le paramètre ev--> ev.clientX;ev.clientY
Obtenir la méthode d'écriture de compatibilité des objets d'événement : var oEvent==ev| |event;
document.oncilck=function(ev){
var oEvent==ev||event;
if( OEVENT) {
Alerte (oEvent.clientx);
}
}

>

6. Concernant les problèmes de compatibilité qui surviennent lors de la liaison de deux événements identiques à un élément : attachEvent/attachEventLister
Liaison d'événement : (Pas de compatibilité nécessite deux combinaisons pour obtenir la compatibilité if..else..)
Utilisé sous IE8 : attachEvent('event name',fn);
FF, Chrome, IE9 -10 utilisations : attachEventLister('event name',fn,false);
Plusieurs liaisons d'événements sont encapsulées dans une fonction compatible :
function myAddEvent(obj, ev ,fn){
if(obj.attachEvent){
//IE8 et versions antérieures
obj.attachEvent('on' +ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev ,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});


Problèmes pour obtenir la distance de la barre de défilement
Lorsque nous obtenons la distance de défilement de la barre de défilement :
IE, Chrome : document.body.scrollTop
FF : document .documentElement .scrollTop
Traitement compatible : var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

Recommandations associées :

Un résumé de certains problèmes de compatibilité et sujets aux erreurs dans js

Analyse spécifique des performances de compatibilité en JavaScript

Méthodes de fonctionnement des chaînes JavaScript et explication détaillée d'exemples de compatibilité de navigateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!