javaScript中一些常見的相容性問題整理

1.關於獲取行外樣式

我們都知道

js通過

style

不可以獲取行外樣式，當我們需要獲取行外樣式時

:我們一般通過這兩個方法獲取行外樣式：

ie下: currentstyle

chrome,ff下

: getcomputedstyle(odiv,false)

相容兩個瀏覽器的寫法

:if(odiv.currentstyle)else*注:

在解決很多相容性寫法時

,都是用

if..else..

封裝乙個獲取行外樣式的函式

:(相容所有瀏覽器

,包括低版本

ie6,7)

funtion getstyle(obj,name)else

}呼叫：

getstyle(odiv,'width');

2.關於用「索引

:

對於字串也有類似於 陣列 這樣的通過 下標索引 獲取每一項的值

,var str="abcde";

aletr(str[1]);

但是低版本的瀏覽器

ie6,7

不相容相容方法

:str.charat(i)    //

全部瀏覽器都相容

var str="abcde";

for(var i=0;i

alert(str.charat(i));   //放回字串中的每一項

}3.關於

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)

}注：上面

childnodes

為我們帶來的困擾完全可以有

children

屬性來代替。

children屬性

:只獲取元素節點

,不獲取文字節點

,相容所有的瀏覽器，

比上面的好用所以我們一般獲取子節點時

,最好用

children

屬性。var oul=document.getelementbyid('ul');

oul.children.style.background="red";

4.關於使用

--ie6-8下

: firstchild,lastchild,nextsibling,previoussibling,

獲取第乙個元素節點

(高版本瀏覽器

ie9+,ff,chrome

不相容,

其獲取的空白文字節點

)--高版本瀏覽器下

: firstelementchild,lastelementchild,nextelementsibling,previouselementsibling

(低版本瀏覽器

ie6-8

不相容)

--相容寫法

: 找到

ul的第乙個元素節點

,並將其背景色變成紅色

var oul=document.getelementbyid('ul');

if(oul.firstelementchild)else

5.關於使用

如:

獲取滑鼠位置

ie/chrom: event.clientx;event.clienty

ff/ie9以上

/chrom:

傳參ev--> ev.clientx;ev.clienty

獲取event

物件相容性寫法

: var oevent==ev||event;

document.oncilck=function(ev)

事件繫結

:(不相容需要兩個結合做相容

if..else..)

ie8以下用

: attachevent('

事件名',fn);

ff,chrome,ie9-10用

: attacheventlister('

事件名',fn,false);

多事件繫結封裝成乙個相容函式

:function myaddevent(obj,ev,fn)else

}myaddevent(obtn,'click',function());

myaddevent(obtn,'click',function());

7.關於獲取滾動條距離而出現的問題

當我們獲取滾動條滾動距離時

:ie,chrome: document.body.scrolltop

ff: document.documentelement.scrolltop

相容處理:var scrolltop=document.documentelement.scrolltop||document.body.scrolltop

1）滾動條：

document.documentelement.scrolltop||document.body.scrolltop

2) 獲採樣式相容

functiongetstyle(dom, stylename)

3) 網頁可視區域相容

window.innerheight || document.documentelement.clientheight

window.innerwidth || document.documentelement.clientwidth

4） 事件物件相容

evt = evt || window.event;

5） 阻止事件冒泡相容

event.stoppropagation?

event.stoppropagation():event.cancelbubble=true;

6）阻止預設行為相容

evt.preventdefault?evt.preventdefault():evt.returnvalue=false;

7）事件監聽相容

if(document.all) else

8）事件目標物件相容

var t = event.target || event.srcelement;

JS 整理javascript中一些常見的陣列方法

1 將陣列轉為字串 array.prototype.join var arr 1,2,3 arr.join 1,2,3 arr.join 1 2 3 重複的字串 function repeatstring str,n repeatstring a 3 aaa repeatstring hi 5 hi...

javascript 中一些奇葩的日期換算

1.獲取今天的0時0分0秒 常用於開始日期的獲取 new date new date tolocaledatestring mon nov 12 2018 00 00 00 gmt 0800 中國標準時間 複製 2.獲取乙個月前的日期 new date new date setmonth new d...

C 中一些常見的方法

1.對規則的字串進行處理的bool splitstring string strorigin,string strsplit,vector vct string str strorigin.substr 0,iindex vct string.push back str ilen int stror...