FF和IE之間7個JavaScript的差異第1/2頁
更新時間:2009年05月10日 14:58:27 作者:
盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經(jīng)結(jié)束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。
這篇文章中,我會略述一下 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 可以很容易的獲取和修改對象的設(shè)定CSS 樣式。但是這一語法的局限在于,它只能取得內(nèi)聯(lián)在 HTML 里的樣式,或者直接使用 JavaScript 設(shè)定的樣式。style 對象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對象的”計算樣式”,我們使用以下代碼:
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 方法來說也是同樣的語法。
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 語法:
復(fù)制代碼 代碼如下:
document.getElementById("header").style.styleFloat = "left";
Firefox 語法:
復(fù)制代碼 代碼如下:
document.getElementById("header").style.cssFloat = "left";
2. 元素的計算樣式
通過使用上述的 object.style.property,JavaScript 可以很容易的獲取和修改對象的設(shè)定CSS 樣式。但是這一語法的局限在于,它只能取得內(nèi)聯(lián)在 HTML 里的樣式,或者直接使用 JavaScript 設(shè)定的樣式。style 對象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對象的”計算樣式”,我們使用以下代碼:
IE 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
Firefox 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. 獲取元素的“class”屬性
類似于“float”屬性的情況,這兩種瀏覽器使用不同的JavaScript 方法來獲取這個屬性。
IE 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 獲取 label 標簽的“for” 屬性
和 3 一樣,使用 JavaScript獲取 label 的“for”屬性也有不同語法。
IE 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Firefox 語法:
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
對于 setAtrribute 方法來說也是同樣的語法。
相關(guān)文章
IE8提示Invalid procedure call or argument 異常的解決方法
某臺機器上,訪問公司的好幾個產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進了下,情況最后簡化為2012-09-09JavaScript數(shù)組排序reverse()和sort()方法詳解
這篇文章主要介紹了JavaScript數(shù)組排序reverse()和sort()方法詳解,需要的朋友可以參考下2017-12-12js實現(xiàn)input框文字動態(tài)變換顯示效果
這篇文章主要介紹了js實現(xiàn)input框文字動態(tài)變換顯示效果,涉及javascript隨機字符串與中文的動態(tài)切換顯示效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08