這篇文章中,我會略述Internet Explorer 和Firefox 在JavaScript 語法上不同的幾個面向。
1. CSS “float” 屬性
取得給定物件的特定CSS 屬性的基本語法是object.style 屬性,而且有連字號的屬性要用駱駝命名法來代替。例如,取得一個ID 為「header」的div 的background-color 屬性,我們要使用以下語法:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
但是由於「float」 是JavaScript的保留詞,我們就無法使用object.style.float 來取得「float」 屬性了。一下是我們在兩種瀏覽器中的使用的方法:
IE 語法:
document.getElementById("header").style.styleFloat = "left";
Firefox 語法:
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;
Firefox 語法:
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");
Firefox 語法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 取得label 標籤的「for」 屬性
和3 一樣,使用JavaScript取得label 的「for」 屬性也有不同語法。
IE 語法:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Firefox 語法:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
對於setAtrribute 方法來說也是同樣的語法。
5. 取得遊標位置
取得元素的遊標位置比較少見,如果需要這麼做,IE 和Firefox 的語法也是不同的。這個範例程式碼是相當基礎的,一般用作許多複雜事件處理的一部分,這裡僅用來描述差異。需要注意的是,IE 中的結果和Firefox 中是不同的,因此這個方法有些問題。通常,這個差異可以透過取得「滾動位置」 來補償- 但那是另外一篇文章的課題了。
IE 語法:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
Firefox 語法:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;