原文:http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie
譯文:http://www.qianduan.net/7-javascript-difference-between-ie-and-firefox
Internet Explorer 和 Firefox 在 JavaScript 上不同的幾個方面。
1. CSS "float" 屬性
獲取給定對象的特定 CSS 屬性的基本語法是 "object.style.property",其中有連字符的屬性要用駱駝命名法來代替,但是由於 "float" 是 JavaScript 的保留詞,就無法使用 object.style.float 來獲取 "float" 屬性了。
IE:
document.getElementById("header").style.styleFloat = "left";
FF:
document.getElementById("header").style.cssFloat = "left";
2. 元素的計算樣式
通過使用上述的 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;
3. 獲取元素的 "class" 屬性
類似於 "float" 屬性的情況,這兩種瀏覽器使用不同的 JavaScript 方法來獲取這個屬性。
IE:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
FF:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 獲取 label 標籤的 "for" 屬性
和 3 一樣,使用 JavaScript獲取 label 的 "for" 屬性也有不同語法。(對於 setAtrribute 方法來說也是同樣的語法。)
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 透明是通過 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";
當然,已經說到了,一般是在循環中間來改變 opcity/alpha,來創建動畫效果,但這這是個簡單的例子,只是爲了明白地描述方法是如何實現地。