溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么理解JavaScript在IE和FireFox中的不同表現(xiàn)

發(fā)布時間：2021-11-18 10:39:35 來源：億速云 閱讀：112 作者：柒染 欄目：web開發(fā)

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

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

1.document.formName.item("itemName")問題

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

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

2.集合類對象問題

說明:IE下,可以使用()或[]獲取集合類對象;Firefox下,只能使用[]獲取集合類對象.

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

3.自定義屬性問題

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

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

4.eval("idName")問題

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

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

5.變量名與某HTML對象ID相同的問題

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

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

7.input.type屬性問題

說明:IE下input.type屬性為只讀;但是Firefox下input.type屬性為讀寫.

9.event.x與event.y問題

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

10.event.srcElement問題

說明:IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,event對象有target屬性,但是沒有srcElement屬性。

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

13.frame問題

以下面的frame為例：

<frame src="xxx.html" id="frameId" name="frameName" />

(1)訪問frame對象:

IE:使用window.frameId或者window.frameName來訪問這個frame對象。

Firefox:只能使用window.frameName來訪問這個frame對象。

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.

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

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

14.body問題

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

Firefox：

<body>   <script type="text/javascript">   document.body.onclick = function(evt){   evtevt = evt || window.event;   alert(evt);   }   </script>   </body>

IE&Firefox：

<body> </body>   <script type="text/javascript">   document.body.onclick = function(evt){   evtevt = evt || window.event;   alert(evt);   } </script>

15. 事件委托方法

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

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

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

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

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

IE：obj.parentElement

Firefox：obj.parentNode

解決方法: 因為Firefox與IE都支持DOM,因此使用obj.parentNode是不錯選擇.

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中類似obj.style.height = imgObj.height的語句無效

解決方法：

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

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

在IE中不允許對table和tr的innerHTML賦值，使用JavaScript增加一個tr時，使用appendChile方法也不管用。

解決方法：

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

20.padding問題

padding 5px 4px 3px 1px FireFox無法解釋簡寫。

必須改成：

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

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

樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px；其中margin屬性對IE有效，padding屬性對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雙線凹凸邊框

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不支持

改用下面三個tag的其中一個來代替document.all：

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

26、Firefox中使用innerHTML的方法

<div id="online"></div> document.all.online.innerHTML; //這種方法在IE中可以使用，但不是標(biāo)準(zhǔn)方法  document.getElementById("online").innerHTML; //這樣firefox就能使用innerHTML了

27、eval()與window.execScript()執(zhí)行腳本

IE、Firerox均支持eval()，F(xiàn)irefox不支持window.execScript()

28、對事件處理函數(shù)的重寫

解決：（例）:如對document的onclick()重寫，統(tǒng)一使用document.onclick = function(){&hellip;}

看完上述內(nèi)容，你們掌握怎么理解JavaScript在IE和FireFox中的不同表現(xiàn)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手