儘管JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經結束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。
這篇文章中,我會略述一下Internet Explorer 和Firefox 在JavaScript 語法上不同的7 個方面。
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;
6. 獲取視窗或瀏覽器窗口的尺寸
有時需要找出瀏覽器的有效窗口空間的尺寸,一般成為”視窗”。
IE 語法:
var myBrowserSize = [0, 0];myBrowserSize[0] = document.documentElement.clientWidth;myBrowserSize[1] = document.documentElement.clientHeight;
Firefox 語法:
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);}Firefox 語法:
#myElement {opacity: 0.5;}要使用JavaScript 獲取這些值,需要使用style 對象:
IE 語法:
var myObject = document.getElementById("myElement");myObject.style.filter = "alpha(opacity=80)";Firefox 語法:
var myObject = document.getElementById("myElement");myObject.style.opacity = "0.5";當然,已經說到了,一般是在循環中間來改變opcity/alpha,來創建動畫效果,但這這是個簡單的例子,只是為了明白地描述方法是如何實現地。
7個方面在JavaScript語法上不同的點,希望對大家的學習有所幫助。