FF和IE之間7個(gè)JavaScript的差異第1/2頁
更新時(shí)間:2009年05月10日 14:58:27 作者:
盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標(biāo)的特定瀏覽器的時(shí)期已經(jīng)結(jié)束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機(jī)器上正常工作依然是必要的。
這篇文章中,我會略述一下 Internet Explorer 和 Firefox 在 JavaScript 語法上不同的 7 個(gè)方面。
1. CSS “float” 屬性
獲取給定對象的特定 CSS 屬性的基本語法是 object.style 屬性,而且有連字符的屬性要用駱駝命名法來代替。例如,獲取一個(gè) 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. 元素的計(jì)算樣式
通過使用上述的 object.style.property,JavaScript 可以很容易的獲取和修改對象的設(shè)定CSS 樣式。但是這一語法的局限在于,它只能取得內(nèi)聯(lián)在 HTML 里的樣式,或者直接使用 JavaScript 設(shè)定的樣式。style 對象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對象的”計(jì)算樣式”,我們使用以下代碼:
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 方法來獲取這個(gè)屬性。
IE 語法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox 語法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 獲取 label 標(biāo)簽的“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 屬性,而且有連字符的屬性要用駱駝命名法來代替。例如,獲取一個(gè) 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. 元素的計(jì)算樣式
通過使用上述的 object.style.property,JavaScript 可以很容易的獲取和修改對象的設(shè)定CSS 樣式。但是這一語法的局限在于,它只能取得內(nèi)聯(lián)在 HTML 里的樣式,或者直接使用 JavaScript 設(shè)定的樣式。style 對象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對象的”計(jì)算樣式”,我們使用以下代碼:
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 方法來獲取這個(gè)屬性。
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 標(biāo)簽的“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)文章
bootstrap模態(tài)框遠(yuǎn)程示例代碼分享
這篇文章主要為大家詳細(xì)介紹了bootstrap模態(tài)框遠(yuǎn)程示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05IE8提示Invalid procedure call or argument 異常的解決方法
某臺機(jī)器上,訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進(jìn)了下,情況最后簡化為2012-09-09使用Vite從零搭建前端項(xiàng)目的詳細(xì)過程
這篇文章主要介紹了使用Vite從零搭建前端項(xiàng)目的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08JavaScript數(shù)組排序reverse()和sort()方法詳解
這篇文章主要介紹了JavaScript數(shù)組排序reverse()和sort()方法詳解,需要的朋友可以參考下2017-12-12js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果
這篇文章主要介紹了js實(shí)現(xiàn)input框文字動(dòng)態(tài)變換顯示效果,涉及javascript隨機(jī)字符串與中文的動(dòng)態(tài)切換顯示效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Javascript 實(shí)現(xiàn)全屏滾動(dòng)實(shí)例代碼
這篇文章主要介紹了Javascript 實(shí)現(xiàn)全屏滾動(dòng)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-12-12