一個 原理 -c csdn pagex pop fault 內部 過去

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

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

1、CSS的“float”屬性

獲取給定對象的特定 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";  

2、元素的計算樣式

通過使用上述的 object.style.property， JavaScript 能夠非常easy的獲取和改動對象的設定 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;  

3、獲取元素的class屬性

類似於”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方法。

4、獲取label標簽的for屬性

與上述類似，我們有不同的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");  

5、獲取光標位置

獲取元素的光標位置比較少見，假設須要這麽做，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;  

6、獲取視窗或瀏覽器窗體的大小

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

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;  

7、Alpha透明處理

這不是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.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment-624

火狐與IE的7個JavaScript差異