怎么理解JavaScript在IE和FireFox中的不同表現(xiàn)，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了豐鎮(zhèn)免費(fèi)建站歡迎大家使用！

Javascript在IE與FireFox中有很多不同的表現(xiàn)，下面我們列舉了一些常見(jiàn)的不同點(diǎn)。深入了解這些差異，能夠幫助Web開(kāi)發(fā)與設(shè)計(jì)者避免出現(xiàn)常識(shí)性的錯(cuò)誤，同時(shí)也提高開(kāi)發(fā)效率。

1.document.formName.item("itemName")問(wèn)題

說(shuō)明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]；Firefox下,只能使用document.formName.elements["elementName"].

解決方法:統(tǒng)一使用document.formName.elements["elementName"].

2.集合類(lèi)對(duì)象問(wèn)題

說(shuō)明:IE下,可以使用()或[]獲取集合類(lèi)對(duì)象;Firefox下,只能使用[]獲取集合類(lèi)對(duì)象.

解決方法:統(tǒng)一使用[]獲取集合類(lèi)對(duì)象.

3.自定義屬性問(wèn)題

說(shuō)明:IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.

4.eval("idName")問(wèn)題

說(shuō)明:IE下，可以使用eval("idName")或getElementById("idName")來(lái)取得id為idName的HTML對(duì)象;Firefox下只能使用getElementById("idName")來(lái)取得id為idName的HTML對(duì)象.。

解決方法:統(tǒng)一用getElementById("idName")來(lái)取得id為idName的HTML對(duì)象.

5.變量名與某HTML對(duì)象ID相同的問(wèn)題

說(shuō)明:IE下,HTML對(duì)象的ID可以作為document的下屬對(duì)象變量名直接使用;Firefox下則不能.Firefox下,可以使用與HTML對(duì)象ID相同的變量名;IE下則不能。

解決方法:使用document.getElementById("idName")代替document.idName.***不要取HTML對(duì)象ID相同的變量名,以減少錯(cuò)誤;在聲明變量時(shí),一律加上var,以避免歧義.

7.input.type屬性問(wèn)題

說(shuō)明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫(xiě).

9.event.x與event.y問(wèn)題

說(shuō)明:IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;Firefox下,even對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性。
 
解決方法:使用mX(mX = event.x ? event.x : event.pageX;)來(lái)代替IE下的event.x或者Firefox下的event.pageX.

10.event.srcElement問(wèn)題

說(shuō)明:IE下,event對(duì)象有srcElement屬性,但是沒(méi)有target屬性;Firefox下,event對(duì)象有target屬性,但是沒(méi)有srcElement屬性。

解決方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來(lái)代替IE下的event.srcElement或者Firefox下的event.target.

13.frame問(wèn)題

以下面的frame為例：

(1)訪(fǎng)問(wèn)frame對(duì)象:

IE:使用window.frameId或者window.frameName來(lái)訪(fǎng)問(wèn)這個(gè)frame對(duì)象。

Firefox:只能使用window.frameName來(lái)訪(fǎng)問(wèn)這個(gè)frame對(duì)象。

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來(lái)訪(fǎng)問(wèn)這個(gè)frame對(duì)象.

(2)切換frame內(nèi)容:

在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來(lái)切換frame的內(nèi)容。如果需要將frame中的參數(shù)傳回父窗口，可以在frme中使用parent來(lái)訪(fǎng)問(wèn)父窗口。例如：parent.document.form1.filename.value="Aqing"。

14.body問(wèn)題

Firefox的body在body標(biāo)簽沒(méi)有被瀏覽器完全讀入之前就存在；而IE的body則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在.

Firefox：

      document.body.onclick = function(evt){   evtevt = evt || window.event;   alert(evt);   }      

IE&Firefox：

       document.body.onclick = function(evt){   evtevt = evt || window.event;   alert(evt);   } 

15. 事件委托方法

IE：document.body.onload = inject; //Function inject()在這之前已被實(shí)現(xiàn)。

Firefox：document.body.onload = inject();

有人說(shuō)標(biāo)準(zhǔn)是：

document.body.onload=new Function('inject()');

16. Firefox與IE(parentElement)的父元素的區(qū)別

IE：obj.parentElement

Firefox：obj.parentNode

解決方法: 因?yàn)镕irefox與IE都支持DOM,因此使用obj.parentNode是不錯(cuò)選擇.

17.innerText在IE中能正常工作，但是innerText在FireFox中卻不行

if(navigator.appName.indexOf("Explorer") > -1){       document.getElementById('element').innerText = "my text";   } else{       document.getElementById('element').textContent = "my text";   }

18. FireFox中類(lèi)似obj.style.height = imgObj.height的語(yǔ)句無(wú)效

解決方法：

obj.style.height = imgObj.height + 'px';

19. IE,Firefox以及其它瀏覽器對(duì)于table標(biāo)簽的操作都各不相同

在IE中不允許對(duì)table和tr的innerHTML賦值，使用JavaScript增加一個(gè)tr時(shí)，使用appendChile方法也不管用。

解決方法：

//向table追加一個(gè)空行：  var row = otable.insertRow(-1);  var cell = document.createElement("td");  cell.innerHTML = " ";   cell.className = "XXXX";   row.appendChild(cell);

20.padding問(wèn)題

padding 5px 4px 3px 1px FireFox無(wú)法解釋簡(jiǎn)寫(xiě)。

必須改成：

padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

21. 消除ul、ol等列表的縮進(jìn)時(shí)

樣式應(yīng)寫(xiě)成:list-style:none;margin:0px;padding:0px；其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效。

22. CSS透明

IE下：

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)

Firefox下：

opacity:0.6

23. CSS圓角

IE下：不支持圓角。

Firefox下：

-moz-border-radius:4px，  或者  -moz-border-radius-topleft:4px;  -moz-border- radius-topright:4px;  -moz-border-radius-bottomleft:4px;  -moz-border-radius- bottomright:4px;

24. CSS雙線(xiàn)凹凸邊框

IE下：

border:2px outset;

Firefox下：

-moz-border-top-colors: #d4d0c8 white;  -moz-border-left-colors: #d4d0c8 white;  -moz-border-right-colors:#404040 #808080;  -moz-border-bottom-colors:#404040 #808080;

25．IE支持document.all 而Firefox不支持

改用下面三個(gè)tag的其中一個(gè)來(lái)代替document.all：

getElementsByTagName("tagName") 可以得到得到所有標(biāo)簽元素的集合  getElementById("idName")          可以按id得到某一元素  getElementsByName("Name")            可以得到按name屬性得到某一元素

26、Firefox中使用innerHTML的方法