摘要：在這篇文章中，我將會(huì)從個(gè)方面概述和在語(yǔ)法上的差異。獲取標(biāo)簽的屬性與上述類(lèi)似，我們有不同的語(yǔ)法來(lái)獲取標(biāo)簽的屬性。這個(gè)示例代碼是相當(dāng)基礎(chǔ)的，一般用作許多復(fù)雜事件處理的一部分，這里僅用來(lái)描述差異。語(yǔ)法語(yǔ)法透明處理這不是的語(yǔ)法問(wèn)題，是通過(guò)設(shè)置的。

原文：http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment-624

作者注：本篇文章發(fā)表于2009.04.27，是一篇關(guān)于討論Javascript在IE6、IE7和FF2+、FF3.0之間的存在的問(wèn)題的文章。

盡管需要用冗長(zhǎng)的JavaScript代碼去識(shí)別特定的瀏覽器的歷史已經(jīng)過(guò)去，但是，偶爾有必要用一段簡(jiǎn)單的JavaScript代碼和對(duì)象檢測(cè)來(lái)確保特定的JavaScript代碼塊能夠在用戶的機(jī)器上運(yùn)行。在這篇文章中，我將會(huì)從7個(gè)方面概述IE和FF在JavaScript語(yǔ)法上的差異。

獲取給定對(duì)象的特定 CSS 屬性的基本語(yǔ)法是 object.style.property，有連字符的屬性要用駱駝命名法來(lái)代替，例如，獲取一個(gè) ID 為 “header” 的 div 的 background-color 屬性，語(yǔ)法如下：

 document.getElementById("header").style.backgroundColor= "#ccc";    

但是自從JavaScript將float作為保留字，我們不能用object.style.float語(yǔ)法來(lái)獲取該屬性。在IE和FF中，我們可以這樣做：

IE語(yǔ)法：

 document.getElementById("header").style.styleFloat = "left";    

FF語(yǔ)法：

document.getElementById("header").style.cssFloat = "left";  

通過(guò)使用上述的 object.style.property， JavaScript 可以很容易的獲取和修改對(duì)象的設(shè)定 CSS 樣式。但是這一語(yǔ)法的局限在于，它只能取得內(nèi)聯(lián)在 HTML 里的樣式，或者直接使用 JavaScript 設(shè)定的樣式。style 對(duì)象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對(duì)象的”計(jì)算樣式”，我們使用以下代碼：

IE語(yǔ)法：

var myObject = document.getElementById("header");    
var myStyle = myObject.currentStyle.backgroundColor;  

FF語(yǔ)法：

var myObject = document.getElementById("header");    
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);    
var myStyle = myComputedStyle.backgroundColor;    

類(lèi)似于”float”屬性，IE和FF用均可以用JavaScript的getAttribute方法，但是語(yǔ)法略有差別：

IE語(yǔ)法：

var myObject = document.getElementById("header");    
var myAttribute = myObject.getAttribute("className");  

FF語(yǔ)法：

var myObject = document.getElementById("header");    
var myAttribute = myObject.getAttribute("class");   

同樣的差異也適用于setAttribute方法。

與上述類(lèi)似，我們有不同的JavaScript語(yǔ)法來(lái)獲取label標(biāo)簽的for屬性。

IE語(yǔ)法：

var myObject = document.getElementById("myLabel");    
var myAttribute = myObject.getAttribute("htmlFor");    

FF語(yǔ)法：

var myObject = document.getElementById("myLabel");    
var myAttribute = myObject.getAttribute("for");    

獲取元素的光標(biāo)位置比較少見(jiàn)，如果需要這么做，IE 和 Firefox 的語(yǔ)法也是不同的。這個(gè)示例代碼是相當(dāng)基礎(chǔ)的，一般用作許多復(fù)雜事件處理的一部分，這里僅用來(lái)描述差異。需要注意的是，IE 中的結(jié)果和 Firefox 中是不同的，因此這個(gè)方法有些問(wèn)題。通常，這個(gè)差異可以通過(guò)獲取 “滾動(dòng)位置” 來(lái)補(bǔ)償 － 但那是另外一篇文章的課題了。

IE語(yǔ)法：

var myCursorPosition = [0, 0];    
myCursorPosition[0] = event.clientX;    
myCursorPosition[1] = event.clientY;    

FF語(yǔ)法：

var myCursorPosition = [0, 0];    
myCursorPosition[0] = event.pageX;    
myCursorPosition[1] = event.pageY;    

有時(shí)需要找出瀏覽器的有效窗口空間的尺寸，一般成為”視窗”。

IE語(yǔ)法：

var myBrowserSize = [0, 0];    
myBrowserSize[0] = document.documentElement.clientWidth;    
myBrowserSize[1] = document.documentElement.clientHeight;    

FF語(yǔ)法：

var myBrowserSize = [0, 0];    
myBrowserSize[0] = window.innerWidth;    
myBrowserSize[1] = window.innerHeight;    

這不是JavaScript的語(yǔ)法問(wèn)題，alpha transparency是通過(guò)css設(shè)置的。但是當(dāng)對(duì)象通過(guò) JavaScript 設(shè)置為淡入淡出時(shí)，這就需要通過(guò)獲取 CSS 的 alpha 設(shè)置，在循環(huán)內(nèi)部來(lái)實(shí)現(xiàn)。要通過(guò)以下 JavaScript 來(lái)改變 CSS 代碼。

IE語(yǔ)法：

#myElement {    
    filter: alpha(opacity=50);    
}    

FF語(yǔ)法：

#myElement {    
    opacity: 0.5;    
}    

為了讓JavaScript獲取這些值，需要使用style對(duì)象。

IE語(yǔ)法：

var myObject = document.getElementById("myElement");    
myObject.style.filter = "alpha(opacity=80)";    

FF語(yǔ)法：

var myObject = document.getElementById("myElement");    
myObject.style.opacity = "0.5";    

當(dāng)然，正如提到的，需要通過(guò)內(nèi)部循環(huán)來(lái)修改alpha/opacity值來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，但這只是一個(gè)用來(lái)說(shuō)用它的工作原理的簡(jiǎn)單例子。

還有其他差異嗎？

這些差異是我個(gè)人在開(kāi)發(fā)或者研究中碰到的，當(dāng)然還有其他方面的差異，如果你認(rèn)為我遺漏了某一個(gè)重要的方面，可以留下你的評(píng)論，我會(huì)去更新這份差異列表，或者在發(fā)表一篇blog。

譯文首發(fā)：http://www.ido321.com/65.html