本文主要和大家分享JS中相容性問題處理方法，希望能幫助大家。
1.關於取得行外樣式currentStyle 和getComputedStyle 出現的相容性問題
我們都知道js透過style不可以取得行外樣式，當我們需要取得行外樣式:
我們通常透過這兩個方法取得行外樣式：
IE下: currentStyle
# Chrome,FF下: getComputedStyle(op,false)
與兩個瀏覽器的寫法：
# alert(op.currentStyle.width);
}else{##>## ;
}
# *附註:解決許多相容性寫法時,都是用if..else..
#封裝一個取得行外樣式的函數:(相容於所有瀏覽器,包含低版IE6,7)
funtion getStyle(obj,name){
obj.currentStyle){
//IE
# ## }else{
//Chrom,FF
}
}
###### 呼叫：getStyle(op,'width');######
2.關於用「索引」取得字串每一項出現的相容性問題:
對字串也有類似陣列這樣的透過下標索引取得每一項的值,
var str="abcde";
aletr(str[1]);
但是低版的瀏覽器IE6,7不相容
相容方法:str.charAt(i) //全部瀏覽器都相容於
var str="abcde";
for(var i=0;i
alert(str.charAt(
alert(str.charAt(
alert(str.charAt(
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
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";
#####################################################################################11 #############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
//IE. oUl.firstChild.style.background='red';
}
5 .關於使用event對象，出現的相容性問題
如: 取得滑鼠位置
IE/Chrom: event.clientX;event.clientY
# FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
取得物件相容性寫法: var o o
## 取得物件相容性寫法: var o o==ev| |event;
document.oncilck=function(ev){
var oEvent){
alert(oEvent.clientX);
###### # #
6.關於為一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現的相容問題
事件綁定:(不相容需要兩個結合做相容if..else..)
IE8以下用: attachEvent('事件名稱',fn);
## FF,Chrome, IE9-10用: attachEventLister('事件名稱',fn,false);
多事件綁定封裝成相容函數:
function myAddEvent(obj, ev,fn){
if(obj.attachEvent){
//IE8以下)## +ev,fn);
}else{
//FF,Chrome,IE9-10
# ,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
#####################. ### alert(b);######### });##################7.關於取得捲軸距離而出現的問題# ########### 當我們取得捲軸滾動距離:######## IE,Chrome: document.body.scrollTop######### .documentElement.scrollTop#########相容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop#########相關推薦：####### ##一些js中兼容性易錯問題的總結############JavaScript中關於兼容性能的具體分析############JavaScript字串操作方法和瀏覽器相容性實例詳解######
以上是JS中相容性問題處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
