FF和IE之間7個JavaScript的差異第1/2頁
更新時間:2009年05月10日 14:58:27 作者:
盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標(biāo)的特定瀏覽器的時期已經(jīng)結(jié)束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機(jī)器上正常工作依然是必要的。
這篇文章中,我會略述一下 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. 元素的計(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 方法來獲取這個屬性。
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 屬性,而且有連字符的屬性要用駱駝命名法來代替。例如,獲取一個 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 方法來獲取這個屬性。
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)文章
跟我學(xué)習(xí)javascript的異步腳本加載
跟我學(xué)習(xí)javascript的異步腳本加載,告訴大家如何使自己的站點(diǎn)更快捷,以及最簡單的方法 利用什么樣的工具達(dá)到預(yù)期效果,想一探究竟的朋友可以參考一下這篇文章。2015-11-11
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)建對象方法解析
本文主要對javascript工廠模式和構(gòu)造函數(shù)模式創(chuàng)建對象方法進(jìn)行解析,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12
JavaScript 冒泡排序和選擇排序的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了js冒泡排序和選擇排序的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-09-09
bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrapTable+ajax加載數(shù)據(jù),以及refresh更新數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08
微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法示例
這篇文章主要介紹了微信小程序基于slider組件動態(tài)修改標(biāo)簽透明度的方法,可通過slider組件拖動實(shí)現(xiàn)圖片透明度的改變功能,涉及微信小程序事件綁定、base64格式圖片載入及slider組件使用技巧,需要的朋友可以參考下2017-12-12
JavaScript+HTML5實(shí)現(xiàn)的日期比較功能示例
這篇文章主要介紹了JavaScript+HTML5實(shí)現(xiàn)的日期比較功能,涉及javascript結(jié)合HTML5針對日期的轉(zhuǎn)換與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-07-07

