開(kāi)發(fā)跨瀏覽器的JavaScript方法說(shuō)明第1/2頁(yè)
更新時(shí)間:2008年08月14日 08:50:59 作者:
IE是當(dāng)前瀏覽器的一個(gè)異類,不過(guò)解決方法倒也相當(dāng)簡(jiǎn)單,使用Firefox和Safari 之 類的瀏覽時(shí),可以使用元素的setArribute方法來(lái)設(shè)置元素的class屬性
開(kāi)發(fā)跨瀏覽器的JavaScript
1. childNodes在ff中和ie的區(qū)別。
ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分開(kāi)的,而ie/op不是這樣的。
<div id="box1"><span>content</span></div>
在ff下,box1的childNodes為3個(gè),ie下為1個(gè)。
2. 設(shè)置某個(gè)node對(duì)象的style class名稱。
ie中要設(shè)置某個(gè)node的class用"className"作為attr來(lái)set或者get。
ff等其它的瀏覽器用"class"作為attr來(lái)set或者get。
代碼:
if(typeof node1.getAttribute("className") == "string") {
.
}
3. 設(shè)置某個(gè)node對(duì)象的style content。
直接舉例把
代碼:
var oStyle = oNode.getAttribute("style");
// ie
if(oStyle == "[object]") {
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
} else {
oNode.setAttribute("style", strStyle);
}
4. 事件對(duì)象。
ie用event
ff用evnt
5. 事件作用對(duì)象
ie用objEvent.srcElement
ff用objEvent.target
這個(gè)跟 xml 文件寫作有關(guān),將 IE 的 preserveWhiteSpace 設(shè)為 true 看看,底下是取自微軟的說(shuō)明文件
代碼:
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = true;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = false;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
-----------------------
1.向表中追加行:
document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或從頭創(chuàng)建包含表行的新表:使用 document.createElement創(chuàng)建表格,在使用document.appendChild方法將這些表單元格增加到表行;接下來(lái)使用 document.appendChild將表行增加到表中。
IE允許講tr元素增加到tbody中,而不是直接增加到table中。
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向這個(gè)表中增加行的正確做法是把行增加到表體,而不是增加到表,如是所示:
var cell=document.createElement("td").appendChild(document.createTextNode("foo");
var row = document.createElement("tr").appendChild(cell);
document.getElementById("mysqlTableBody").appendChild(row);
幸運(yùn)的是,這種方法在所有當(dāng)前瀏覽器都通用,也包括IE。如果你養(yǎng)成習(xí)慣,總是使用表中的表體,就不用擔(dān)心這個(gè)問(wèn)題了。
2 通過(guò)Javascrīpt設(shè)置元素的樣式
可以通過(guò)Javascrīpt使用元素的setAttribute方法設(shè)置元素的樣式。例如,要把span 元素中的文本修改為采用紅色粗體顯示,可以使用setAttribute方法如下:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold ; color: red;");
除了IE,這種方法在當(dāng)前其它瀏覽器上都是行得通的.對(duì)于IE,解決方法是使用元素 style對(duì)象的cssText屬性來(lái)設(shè)置所需樣式,盡管這個(gè)屬性不是標(biāo)準(zhǔn)的,但是得到廣泛支持, 如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:blod ; color:red;";
這種方法在IE和大多數(shù)其他瀏覽器上都能很好好工作,只有Opera除外。為了讓代碼在 所有當(dāng)前瀏覽器上都可移植,可以同時(shí)使用這兩種方法,也就是既使用setAttribute方法, 又使用style對(duì)像的cssText屬性,如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold ; color: red;");
spanElement.style.cssText = "font-weight:blod ; color:red;";
1. childNodes在ff中和ie的區(qū)別。
ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分開(kāi)的,而ie/op不是這樣的。
<div id="box1"><span>content</span></div>
在ff下,box1的childNodes為3個(gè),ie下為1個(gè)。
2. 設(shè)置某個(gè)node對(duì)象的style class名稱。
ie中要設(shè)置某個(gè)node的class用"className"作為attr來(lái)set或者get。
ff等其它的瀏覽器用"class"作為attr來(lái)set或者get。
代碼:
if(typeof node1.getAttribute("className") == "string") {
.
}
3. 設(shè)置某個(gè)node對(duì)象的style content。
直接舉例把
代碼:
var oStyle = oNode.getAttribute("style");
// ie
if(oStyle == "[object]") {
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
} else {
oNode.setAttribute("style", strStyle);
}
4. 事件對(duì)象。
ie用event
ff用evnt
5. 事件作用對(duì)象
ie用objEvent.srcElement
ff用objEvent.target
這個(gè)跟 xml 文件寫作有關(guān),將 IE 的 preserveWhiteSpace 設(shè)為 true 看看,底下是取自微軟的說(shuō)明文件
代碼:
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = true;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
xmlDoc.async = false;
xmlDoc.preserveWhiteSpace = false;
xmlDoc.load("books.xml");
alert(xmlDoc.xml);
-----------------------
1.向表中追加行:
document.createElement 和document.appendChild方法可以很容易的做到向表中追加行或從頭創(chuàng)建包含表行的新表:使用 document.createElement創(chuàng)建表格,在使用document.appendChild方法將這些表單元格增加到表行;接下來(lái)使用 document.appendChild將表行增加到表中。
IE允許講tr元素增加到tbody中,而不是直接增加到table中。
<table id="myTable">
<tbody id="myTableBody"></tbody>
</table>
向這個(gè)表中增加行的正確做法是把行增加到表體,而不是增加到表,如是所示:
var cell=document.createElement("td").appendChild(document.createTextNode("foo");
var row = document.createElement("tr").appendChild(cell);
document.getElementById("mysqlTableBody").appendChild(row);
幸運(yùn)的是,這種方法在所有當(dāng)前瀏覽器都通用,也包括IE。如果你養(yǎng)成習(xí)慣,總是使用表中的表體,就不用擔(dān)心這個(gè)問(wèn)題了。
2 通過(guò)Javascrīpt設(shè)置元素的樣式
可以通過(guò)Javascrīpt使用元素的setAttribute方法設(shè)置元素的樣式。例如,要把span 元素中的文本修改為采用紅色粗體顯示,可以使用setAttribute方法如下:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold ; color: red;");
除了IE,這種方法在當(dāng)前其它瀏覽器上都是行得通的.對(duì)于IE,解決方法是使用元素 style對(duì)象的cssText屬性來(lái)設(shè)置所需樣式,盡管這個(gè)屬性不是標(biāo)準(zhǔn)的,但是得到廣泛支持, 如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.style.cssText = "font-weight:blod ; color:red;";
這種方法在IE和大多數(shù)其他瀏覽器上都能很好好工作,只有Opera除外。為了讓代碼在 所有當(dāng)前瀏覽器上都可移植,可以同時(shí)使用這兩種方法,也就是既使用setAttribute方法, 又使用style對(duì)像的cssText屬性,如下所示:
var spanElement = document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold ; color: red;");
spanElement.style.cssText = "font-weight:blod ; color:red;";
相關(guān)文章
JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05es6函數(shù)之尾調(diào)用優(yōu)化實(shí)例分析
這篇文章主要介紹了es6函數(shù)之尾調(diào)用優(yōu)化,結(jié)合實(shí)例形式分析了es6函數(shù)尾調(diào)用優(yōu)化相關(guān)功能、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)頁(yè)面刷新時(shí)自動(dòng)清空表單并選中的方法,涉及javascript中reset與focus方法的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法
這篇文章主要介紹了IE中JS跳轉(zhuǎn)丟失referrer問(wèn)題的2個(gè)解決方法,算是IE的一個(gè)BUG吧,本文提供了2個(gè)方法解決這個(gè)問(wèn)題,需要的朋友可以參考下2014-07-07JS基于正則表達(dá)式實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證功能示例
這篇文章主要介紹了JS基于正則表達(dá)式實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證功能,涉及javascript事件響應(yīng)及基于正則的字符遍歷、判斷等相關(guān)操作技巧,需要的朋友可以參考下2017-09-09解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02