How to deal with compatibility issues in JS

This article mainly shares with you how to deal with compatibility issues in JS, hoping to help everyone.

1. Regarding the compatibility issues that arise when obtaining out-of-line styles currentStyle and getComputedStyle
We all know that js cannot obtain out-of-line styles through style Style, when we need to get the out-of-line style:
We usually get the out-of-line style through these two methods:
Under IE: currentStyle
Under Chrome, FF: getComputedStyle(op,false)
Compatible with both browsers:
if(op.currentStyle){
          alert(op.currentStyle.width);
                                                                                        ’ using ’ s ’ s ‐       ‐ ‐ ‐ ‐ alert(op.currentStyle.width);
## } }
*Note: When solving many compatibility writing methods, if..else..
Encapsulate a function to get out-of-line style: (compatible with all browsers, including lower versions of IE6,7)

funtion getStyle(obj,name){
if( obj.currentStyle){
                                                                 ’’' ## // chrom, ff
RetComputedStyle (obj, false) [name]
##}
#}
Call: getStyle(op,'width');

2. Regarding the compatibility issues that arise when using "index" to obtain each item of a string:
There are also problems with strings Similar to an array, obtain the value of each item through a subscript index,
var str="abcde";
aletr(str[1]);
However, lower version browsers IE6 and 7 are not compatible
Compatibility method: str.charAt(i) //All browsers are compatible
var str="abcde";
for(var i=0;i
alert(str.charAt( i)); //Put back each item in the string
}


3. About getting childNodes in DOM Compatibility issues with child nodes
childNodes: Get child nodes,
--IE6-8: Get element nodes, normal
--Higher version browser: But it will contain text nodes and element nodes (not normal)
Solution: Use nodeType: the type of node and make a judgment
--nodeType=3-->Text Node
--nodeTyPE=1-->Element Node
Example: Get ul All child nodes in it, make the background color of all child nodes turn red
Compatible method for obtaining element child nodes:
var oUl=document.getElementById(' ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType ==1){
oUl.childNodes[i].style.background='red';
}
}
Note: The trouble caused by childNodes above can be completely replaced by the children attribute.
children attribute: only gets element nodes, not text nodes, compatible with all browsers,
is easier to use than the above, so when we usually get child nodes, It is best to use the children attribute.
var oUl=document.getElementById('ul');
var oUl.children.style.background="red";



4. About the problems that occur when using firstChild, lastChild, etc. to obtain the first/last element node
--IE6 -8 times: firstChild, lastChild, nextSibling, previousSibling, get the first element node
(Higher version browsers IE9+, FF, Chrome are not compatible, and the blank text nodes they get)
--Under higher version browsers: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(lower version browsers IE6-8 are not compatible)
--Compatible writing method: Find the first element node of ul and change its background color to red
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//Higher version browser
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}

5 . Regarding the compatibility issues that arise when using event objects
For example: Obtaining the mouse position
IE/Chrom: event.clientX;event.clientY
FF/IE9 or above/Chrom: Pass parameter ev--> ev.clientX;ev.clientY
Get event object compatibility writing method: var oEvent==ev| |event;
document.oncilck=function(ev){
var oEvent==ev||event;
if( oEvent){
                alert(oEvent.clientX); #

6. Regarding the compatibility issues arising from binding two identical events to an element: attachEvent/attachEventLister
Event binding: (No Compatibility requires two combinations to make compatibility if..else..)
Used below IE8: attachEvent('event name',fn);
FF,Chrome, IE9-10 uses: attachEventLister('event name',fn,false);
Multiple event bindings are encapsulated into a compatible function:
function myAddEvent(obj, ev,fn){
if(obj.attachEvent){
//IE8 and below
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);
});


7. Problems arising from obtaining the scroll bar distance
When we get the scroll bar scrolling distance:
IE,Chrome: document.body.scrollTop
FF: document .documentElement.scrollTop
Compatible processing: var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

Related recommendations:

Summary of some compatibility and error-prone issues in js

Specific analysis of compatibility performance in JavaScript

JavaScript string operation methods and Detailed explanation of browser compatibility examples

The above is the detailed content of How to deal with compatibility issues in JS. For more information, please follow other related articles on the PHP Chinese website!