摘要：在這篇文章中，我將會從個方面概述和在語法上的差異。獲取標簽的屬性與上述類似，我們有不同的語法來獲取標簽的屬性。這個示例代碼是相當基礎的，一般用作許多復雜事件處理的一部分，這里僅用來描述差異。語法語法透明處理這不是的語法問題，是通過設置的。

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

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

盡管需要用冗長的JavaScript代碼去識別特定的瀏覽器的歷史已經過去，但是，偶爾有必要用一段簡單的JavaScript代碼和對象檢測來確保特定的JavaScript代碼塊能夠在用戶的機器上運行。在這篇文章中，我將會從7個方面概述IE和FF在JavaScript語法上的差異。

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

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

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

IE語法：

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

FF語法：

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

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

IE語法：

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

FF語法：

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

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

IE語法：

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

FF語法：

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

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

與上述類似，我們有不同的JavaScript語法來獲取label標簽的for屬性。

IE語法：

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

FF語法：

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

獲取元素的光標位置比較少見，如果需要這么做，IE 和 Firefox 的語法也是不同的。這個示例代碼是相當基礎的，一般用作許多復雜事件處理的一部分，這里僅用來描述差異。需要注意的是，IE 中的結果和 Firefox 中是不同的，因此這個方法有些問題。通常，這個差異可以通過獲取 “滾動位置” 來補償 － 但那是另外一篇文章的課題了。

IE語法：

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

FF語法：

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

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

IE語法：

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

FF語法：

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

這不是JavaScript的語法問題，alpha transparency是通過css設置的。但是當對象通過 JavaScript 設置為淡入淡出時，這就需要通過獲取 CSS 的 alpha 設置，在循環內部來實現。要通過以下 JavaScript 來改變 CSS 代碼。

IE語法：

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

FF語法：

#myElement {    
    opacity: 0.5;    
}    

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

IE語法：

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

FF語法：

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

當然，正如提到的，需要通過內部循環來修改alpha/opacity值來實現動畫效果，但這只是一個用來說用它的工作原理的簡單例子。

還有其他差異嗎？

這些差異是我個人在開發或者研究中碰到的，當然還有其他方面的差異，如果你認為我遺漏了某一個重要的方面，可以留下你的評論，我會去更新這份差異列表，或者在發表一篇blog。

譯文首發：http://www.ido321.com/65.html