FF和IE之間7個(gè)JavaScript的差異第1/2頁(yè)
更新時(shí)間：2009年05月10日 14:58:27 作者：
盡管 JavaScript 歷史上使用冗長(zhǎng)而令人生厭的代碼塊來(lái)標(biāo)的特定瀏覽器的時(shí)期已經(jīng)結(jié)束了，但是偶爾使用一些簡(jiǎn)單的代碼塊和對(duì)象檢測(cè)來(lái)確保一些代碼在用戶機(jī)器上正常工作依然是必要的。
這篇文章中，我會(huì)略述一下 Internet Explorer 和 Firefox 在 JavaScript 語(yǔ)法上不同的 7 個(gè)方面。
1. CSS “float” 屬性
獲取給定對(duì)象的特定 CSS 屬性的基本語(yǔ)法是 object.style 屬性，而且有連字符的屬性要用駱駝命名法來(lái)代替。例如，獲取一個(gè) ID 為 “header” 的 div 的 background-color 屬性，我們要用如下語(yǔ)法：
document.getElementById("header").style.borderBottom= "1px solid #ccc";
但是由于 “float” 是 JavaScript 的保留詞，我們就無(wú)法使用 object.style.float 來(lái)獲取 “float” 屬性了。一下是我們?cè)趦煞N瀏覽器中的使用的方法：
IE 語(yǔ)法：
document.getElementById("header").style.styleFloat = "left";
Firefox 語(yǔ)法：
document.getElementById("header").style.cssFloat = "left";
2. 元素的計(jì)算樣式
通過(guò)使用上述的 object.style.property，JavaScript 可以很容易的獲取和修改對(duì)象的設(shè)定CSS 樣式。但是這一語(yǔ)法的局限在于，它只能取得內(nèi)聯(lián)在 HTML 里的樣式，或者直接使用 JavaScript 設(shè)定的樣式。style 對(duì)象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對(duì)象的”計(jì)算樣式”，我們使用以下代碼：
IE 語(yǔ)法：
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
Firefox 語(yǔ)法：
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. 獲取元素的“class”屬性
類似于“float”屬性的情況，這兩種瀏覽器使用不同的JavaScript 方法來(lái)獲取這個(gè)屬性。
IE 語(yǔ)法：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox 語(yǔ)法：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 獲取 label 標(biāo)簽的“for” 屬性
和 3 一樣，使用 JavaScript獲取 label 的“for”屬性也有不同語(yǔ)法。
IE 語(yǔ)法：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Firefox 語(yǔ)法：
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
對(duì)于 setAtrribute 方法來(lái)說(shuō)也是同樣的語(yǔ)法。
1. CSS “float” 屬性
獲取給定對(duì)象的特定 CSS 屬性的基本語(yǔ)法是 object.style 屬性，而且有連字符的屬性要用駱駝命名法來(lái)代替。例如，獲取一個(gè) ID 為 “header” 的 div 的 background-color 屬性，我們要用如下語(yǔ)法：
document.getElementById("header").style.borderBottom= "1px solid #ccc";
但是由于 “float” 是 JavaScript 的保留詞，我們就無(wú)法使用 object.style.float 來(lái)獲取 “float” 屬性了。一下是我們?cè)趦煞N瀏覽器中的使用的方法：
IE 語(yǔ)法：
復(fù)制代碼 代碼如下:
document.getElementById("header").style.styleFloat = "left";
Firefox 語(yǔ)法：
復(fù)制代碼 代碼如下:
document.getElementById("header").style.cssFloat = "left";
2. 元素的計(jì)算樣式
通過(guò)使用上述的 object.style.property，JavaScript 可以很容易的獲取和修改對(duì)象的設(shè)定CSS 樣式。但是這一語(yǔ)法的局限在于，它只能取得內(nèi)聯(lián)在 HTML 里的樣式，或者直接使用 JavaScript 設(shè)定的樣式。style 對(duì)象不能獲取使用外部樣式表設(shè)定的樣式。為了獲取對(duì)象的”計(jì)算樣式”，我們使用以下代碼：
IE 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
Firefox 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. 獲取元素的“class”屬性
類似于“float”屬性的情況，這兩種瀏覽器使用不同的JavaScript 方法來(lái)獲取這個(gè)屬性。
IE 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
Firefox 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
4. 獲取 label 標(biāo)簽的“for” 屬性
和 3 一樣，使用 JavaScript獲取 label 的“for”屬性也有不同語(yǔ)法。
IE 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Firefox 語(yǔ)法：
復(fù)制代碼 代碼如下:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
對(duì)于 setAtrribute 方法來(lái)說(shuō)也是同樣的語(yǔ)法。
相關(guān)文章
簡(jiǎn)單的防盜鏈功能代碼(iframe)...2006-08-08
跟我學(xué)習(xí)javascript的異步腳本加載
跟我學(xué)習(xí)javascript的異步腳本加載，告訴大家如何使自己的站點(diǎn)更快捷，以及最簡(jiǎn)單的方法 利用什么樣的工具達(dá)到預(yù)期效果，想一探究竟的朋友可以參考一下這篇文章。2015-11-11
js的解析器對(duì)函數(shù)聲明與函數(shù)表達(dá)式并不是一視同仁地對(duì)待的。對(duì)于函數(shù)聲明，js解析器會(huì)優(yōu)先讀取，確保在所有代碼執(zhí)行之前聲明已經(jīng)被解析，而函數(shù)表達(dá)式，如同定義其它基本類型的變量一樣，只在執(zhí)行到某一句時(shí)也會(huì)對(duì)其進(jìn)行解析，2015-06-06
JavaScript獲取GridView選擇的行內(nèi)容
一般GridView第一列是多選框CheckBox，負(fù)責(zé)標(biāo)記當(dāng)前行是否被選中，后面可以有文本框TextBox，下拉框DropDownList，標(biāo)簽Lable2009-04-04
javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對(duì)象方法解析
本文主要對(duì)javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對(duì)象方法進(jìn)行解析，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
JavaScript 冒泡排序和選擇排序的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了js冒泡排序和選擇排序的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù)，以及refresh更新數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
淺談在js傳遞參數(shù)中含加號(hào)(+)的處理方式
下面小編就為大家?guī)?lái)一篇淺談在js傳遞參數(shù)中含加號(hào)(+)的處理方式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
微信小程序基于slider組件動(dòng)態(tài)修改標(biāo)簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動(dòng)態(tài)修改標(biāo)簽透明度的方法,可通過(guò)slider組件拖動(dòng)實(shí)現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12
JavaScript+HTML5實(shí)現(xiàn)的日期比較功能示例
這篇文章主要介紹了JavaScript+HTML5實(shí)現(xiàn)的日期比較功能,涉及javascript結(jié)合HTML5針對(duì)日期的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07