js兼容問題
什么是兼容？
兼容是計算機術語，相對於軟件，一種是指某個軟件能穩定地工作在某操作系統之中，就說這個軟件對這個操作系統是兼容的。再就是在多任務操作系統中，幾個同時運行的軟件之間，如果能穩定地工作，不出經常性的錯誤，就說它們之間的兼容性好，否則就是兼容性不好。
1.關於獲取行外樣式 currentStyle 和 getComputedStyle 出現的兼容性問題
我們都知道js通過style不可以獲取行外樣式，當我們需要獲取行外樣式時:
我們一般通過這兩個方法獲取行外樣式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容兩個瀏覽器的寫法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解決很多兼容性寫法時,都是用if..else..
封裝一個獲取行外樣式的函數:(兼容所有瀏覽器,包括低版本IE6,7)
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
調用：getStyle(oDiv,'width');
2.關於用“索引”獲取字符串每一項出現的兼容性問題:
對於字符串也有類似於 數組 這樣的通過 下標索引 獲取每一項的值,
var str="abcde";
aletr(str[1]);
但是低版本的瀏覽器IE6,7不兼容
兼容方法:str.charAt(i) //全部瀏覽器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
alert(str.charAt(i)); //放回字符串中的每一項
}
3.關於DOM中 childNodes 獲取子節點出現的兼容性問題
childNodes:獲取子節點,
--IE6-8:獲取的是元素節點,正常
--高版本瀏覽器:但是會包含文本節點和元素節點(不正常)
解決方法: 使用nodeType:節點的類型，並作出判斷
--nodeType=3-->文本節點
--nodeTyPE=1-->元素節點
例: 獲取ul里所有的子節點，讓所有的子節點背景色變成紅色
獲取元素子節點兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes為我們帶來的困擾完全可以有children屬性來代替。
children屬性:只獲取元素節點,不獲取文本節點,兼容所有的瀏覽器，
比上面的好用所以我們一般獲取子節點時,最好用children屬性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
//DOM節點相關，主要兼容IE 6 7 8
function
nextnode(obj){
//獲取下一個兄弟節點
if
(obj.nextElementSibling) {
return
obj.nextElementSibling;
}
else
{
return
obj.nextSibling;
};
}
function
prenode(obj){
//獲取上一個兄弟節點
if
(obj.previousElementSibling) {
return
obj.previousElementSibling;
}
else
{
return
obj.previousSibling;
};
}
function
firstnode(obj){
//獲取第一個子節點
if
(obj.firstElementChild) {
return
obj.firstElementChild;
//非IE678支持
}
else
{
return
obj.firstChild;
//IE678支持
};
}
function
lastnode(obj){
//獲取最后一個子節點
if
(obj.lastElementChild) {
return
obj.lastElementChild;
//非IE678支持
}
else
{
return
obj.lastChild;
//IE678支持
};
}
4.關於使用 firstChild,lastChild 等，獲取第一個/最后一個元素節點時產生的問題
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節點
(高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節點)
--高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本瀏覽器IE6-8不兼容)
--兼容寫法: 找到ul的第一個元素節點,並將其背景色變成紅色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本瀏覽器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}
5.關於使用 event對象，出現的兼容性問題
如: 獲取鼠標位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
獲取event對象兼容性寫法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
//event事件問題
document.onclick=
function
(ev){
//谷歌火狐的寫法，IE9以上支持，往下不支持；
var
e=ev;
console.log(e);
}
document.onclick=
function
(){
//谷歌和IE支持，火狐不支持；
var
e=event;
console.log(e);
}
document.onclick=
function
(ev){
//兼容寫法；
var
e=ev||window.event;
var
mouseX=e.clientX;
//鼠標X軸的坐標
var
mouseY=e.clientY;
//鼠標Y軸的坐標
}
6.關於為一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現的兼容問題
事件綁定:(不兼容需要兩個結合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件綁定封裝成一個兼容函數:
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
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.關於獲取滾動條距離而出現的問題
當我們獲取滾動條滾動距離時:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
8.事件冒泡兼容
eve.stopPropagation();
eve.cancelBubble = true; //兼容IE
9.獲取非行內樣式
兼容
if(window.getComputedStyle){ //高版本瀏覽器window上有getComputedStyle
window.getComputedStyle(box,null).width
}else{
box.currentStyle.width;
}
function getStyle(obj,attr){ //獲取非行間樣式，obj是對象，attr是值
if(obj.currentStyle){ //針對ie獲取非行間樣式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //針對非ie
};
};
10.鍵盤事件
var x = event.which || event.keyCode;
11.事件監聽器（兼容）
兼容問題解決：
1.封裝成對象的方式
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent('on'+EventType,fn)
}else{
DOM['on'+EventType]=null;
}
}
}
2.封裝成兩個函數的方式
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
12.獲取事件源
var target = e.target || e.srcElement
13.獲取方式
兼容方式：
function fn(eve){
var e = eve || window.event;
}
document.onclick = function(eve){
var e = eve || window.event;
console.log(e);
}
14.常遇到的關於瀏覽器的寬高問題：
//以下均可console.log()實驗
var
winW=document.body.clientWidth||document.docuemntElement.clientWidth;
//網頁可見區域寬
var
winH=document.body.clientHeight||document.docuemntElement.clientHeight;
//網頁可見區域寬
//以上為不包括邊框的寬高，如果是offsetWidth或者offsetHeight的話包括邊框
var
winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;
//整個網頁的寬
var
winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;
//整個網頁的高
var
scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;
//網頁被卷去的高
var
scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;
//網頁左卷的距離
var
screenH=window.screen.height;
//屏幕分辨率的高
var
screenW=window.screen.width;
//屏幕分辨率的寬
var
screenX=window.screenLeft;
//瀏覽器窗口相對於屏幕的x坐標（除了FireFox）
var
screenXX=window.screenX;
//FireFox相對於屏幕的X坐標
var
screenY=window.screenTop;
//瀏覽器窗口相對於屏幕的y坐標（除了FireFox）
var
screenYY=window.screenY;
//FireFox相對於屏幕的y坐標
15.document.getElementsByClassName問題：