Wie man mit Kompatibilitätsproblemen in JS umgeht

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit Kompatibilitätsproblemen in JS umgehen können. Ich hoffe, er kann Ihnen helfen.

1. Zu den Kompatibilitätsproblemen beim Abrufen der Out-of-Line-Stile currentStyle und getComputedStyle
Wir alle wissen, dass js keine Out-of-Line-Stile erhalten kann. Offline-Stile durch Stilstil, wenn wir den Out-of-Line-Stil benötigen:
Normalerweise erhalten wir den Out-of-Line-Stil durch diese beiden Methoden:
Unter IE: currentStyle
Unter Chrome, FF: getComputedStyle(op,false)
Kompatibel mit beiden Browsern:
if(op.currentStyle){
Alert(op.currentStyle.width);
}else{
Alert(getComputedStyle (op,false).width);
}
*Hinweis: Bei der Lösung vieler Kompatibilitätsschreibmethoden, if..else..

Kapseln Sie eine Funktion, um einen Out-of-Line-Stil zu erhalten: (kompatibel mit allen Browsern, einschließlich niedrigerer Versionen IE6,7)
Funktion getStyle(obj,name){
if( obj.currentStyle){
                                                                                                                          se{
}
Aufruf: getStyle(op ,'width');

2. Zu den Kompatibilitätsproblemen, die bei der Verwendung von „index“ zum Abrufen jedes Elements einer Zeichenfolge auftreten:
Es gibt auch Probleme mit Strings Ähnlich wie bei einem Array erhalten Sie den Wert jedes Elements über einen tiefgestellten Index,
var str="abcde";
aletr(str[1 ]);
Aber niedrigere Browserversionen IE6 und 7 sind nicht kompatibel
Kompatibilitätsmethode: str.charAt(i) //Alle Browser sind kompatibel
var str="abcde";
for(var i=0;i
Alert(str. charAt( i)); // Jedes Element in der Zeichenfolge zurücksetzen
}


3. Informationen zum Abrufen von ChildNodes im DOM Kompatibilitätsprobleme mit untergeordneten Knoten
childNodes: Untergeordnete Knoten abrufen,
--IE6-8: Elementknoten abrufen, normal
--Browser höherer Versionen: Es enthält jedoch Textknoten und Elementknoten (nicht normal)
Lösung: Verwenden Sie nodeType: den Knotentyp und treffen Sie eine Beurteilung
--nodeType=3-->Textknoten
--nodeTyPE=1-->Elementknoten
Beispiel: Alle untergeordneten Knoten abrufen Machen Sie damit die Hintergrundfarbe aller untergeordneten Knoten rot.
Holen Sie sich die kompatible Methode für untergeordnete Elementknoten:
var oUl=document.getElementById(' ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType ==1) {
oUl.childNodes[i].style.background='red';
}
}
Hinweis: Die oben durch childNodes verursachten Probleme können vollständig durch das Children-Attribut ersetzt werden.
Kinderattribut: Nur Elementknoten abrufen, keine Textknoten, kompatibel mit allen Browsern,
Es ist einfacher zu verwenden als das oben genannte, wenn wir also normalerweise Kinder bekommen Knoten, Am besten verwenden Sie das Attribut „Children“.
var oUl=document.getElementById('ul');
oUl.children.style.background="red";



4. Zu den Problemen, die bei der Verwendung von firstChild, lastChild usw. zum Erhalten des ersten/letzten Elementknotens auftreten
-- IE6 -8 mal: firstChild, lastChild, nextSibling, previousSibling, holen Sie sich den ersten Elementknoten
(Browser höherer Versionen IE9+, FF, Chrome sind nicht kompatibel und erhalten den leeren Textknoten)
– Unter höheren Browserversionen: firstElementChild, lastElementChild, nextElementSibling, previousElementSibling
(Browser mit niedrigerer Version IE6-8 sind nicht kompatibel)
--Kompatible Schreibmethode: Suchen Sie den ersten Elementknoten von ul und ändern Sie seine Hintergrundfarbe in Rot
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//Browser höherer Version
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}

5 Bei der Verwendung von Ereignisobjekten treten Kompatibilitätsprobleme auf
Zum Beispiel: Ermitteln Sie die Mausposition
IE/Chrom: event.clientX;event.clientY
FF/IE9 oder höher/Chrom: Übergeben Sie den Parameter ev--> ev.clientX;ev.clientY
Rufen Sie die Schreibmethode für die Ereignisobjektkompatibilität ab: var oEvent==ev| |event;
document.oncilck=function(ev){
var oEvent==ev||event;
if( OEVENT) {
Alert (oEvent.clientx);
}
}

>

6. Zu den Kompatibilitätsproblemen, die beim Binden zweier identischer Ereignisse an ein Element auftreten: attachmentEvent/attachEventLister
Ereignisbindung: (Keine Kompatibilität erfordert zwei Kombinationen, um Kompatibilität zu erreichen, wenn..else..)
Wird unter IE8 verwendet: attachmentEvent('event name',fn);
FF, Chrome, IE9 -10 verwendet: attachmentEventLister('event name',fn,false);
Mehrere Ereignisbindungen werden in einer kompatiblen Funktion gekapselt:
function myAddEvent(obj, ev ,fn){
if(obj.attachEvent){
//IE8 und niedriger
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(){
Warnung(b);
});


7. Probleme beim Ermitteln des Bildlaufleistenabstands
Wenn wir den Bildlaufabstand der Bildlaufleiste erhalten:
IE, Chrome: document.body.scrollTop
FF: document .documentElement .scrollTop
Kompatible Verarbeitung: var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

Verwandte Empfehlungen:

Eine Zusammenfassung einiger Kompatibilitäts- und fehleranfälliger Probleme in js

Spezifische Analyse der Kompatibilitätsleistung in JavaScript

JavaScript-String-Operationsmethoden und detaillierte Erklärung Beispiele für Browserkompatibilität

Das obige ist der detaillierte Inhalt vonWie man mit Kompatibilitätsproblemen in JS umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!