javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:54:34

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧:測(cè)試環(huán)境（客戶端瀏覽器） IE6，IE7， IE8兼容模式， IE8 Firefox 3.6.8, google chrome 5.0.375.125 先來說明兩個(gè)函數(shù)的標(biāo)準(zhǔn)定義。 elementNode.setAttribute(name,value) name 必需。規(guī)定要設(shè)置的屬性名。 value 必需。規(guī)定要設(shè)置的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧:測(cè)試環(huán)境（客戶端瀏覽器） IE6，IE7， IE8兼容模式， IE8 Firefox 3.6.8, google chrome 5.0.375.125 先來說明兩個(gè)函數(shù)的標(biāo)準(zhǔn)定義。 elementNode.setAttribute(name,value) name 必需。規(guī)定要設(shè)置的屬性名。 value 必需。規(guī)定要設(shè)置的

測(cè)試環(huán)境（客戶端瀏覽器）
IE6，IE7， IE8兼容模式， IE8
Firefox 3.6.8, google chrome 5.0.375.125

先來說明兩個(gè)函數(shù)的標(biāo)準(zhǔn)定義。
elementNode.setAttribute(name,value)
name 必需。規(guī)定要設(shè)置的屬性名。
value 必需。規(guī)定要設(shè)置的屬性值。
該方法把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。

elementNode.getAttribute(name)
name 必需。規(guī)定從中取得屬性值的屬性。

一、setAttribute的問題
elementNode為...

希望對(duì)其增加一個(gè)單擊行的事件處理函數(shù)，
寫法1：

table1row1.setAttribute("onclick", "selectrow1(this)");

IE8, Firefox, google chrome 能正確觸發(fā)click 事件
IE6，IE7則不能觸發(fā)click 事件。
寫法2：

table2row1.onclick = function() { selectrow2(this) };

所有測(cè)試瀏覽器均能觸發(fā)click 事件

故為了兼容在不同的IE中，我們可以統(tǒng)一使用如下語句。

table2row1.onclick = function() { selectrow2(this) };

二、getAttribute的問題
elementNode為...
先用setAttribute設(shè)置屬性
table1row1.setAttribute("level", 1);
再用getAttribute來獲取標(biāo)簽的屬性值
var level = table1row1.getAttribute("level");
alert("table1row1 level:" + level + "\r\ntypeof(level) = " + (typeof (level)).toString());
在IE6，7 中顯示

table1row1 level:1
typeof(level) = number

在IE8, Firefox, google chrome中顯示

table1row1 level:1
typeof(level) = string
為統(tǒng)一處理此兩種情況，代碼統(tǒng)一如下：

代碼如下:

var level = table1row1.getAttribute("level"); 
if (level === undefined || level == null) { 
level = "0"; 
} 
level = level.toString(); 
if (level.trim() == "") { 
level = "0"; 
}

或者使用ajax方法
$addHandler 是Sys.UI.DomEvent.addHandler 的快捷方式，它的語法為：
$addHandler(element, eventName, handler);
element 公開事件的 DOM 元素。
eventName 事件的名稱。
handler 要添加的事件處理程序。
前面的語句可以寫成這樣：

$addHandler(row,"click", function() { selectrow(this) });

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<script type="text/javascript" language="javascript"> 
function pageLoad() { 
var table1row1 = document.getElementById("table1row1"); 
table1row1.setAttribute("level", 1); 
table1row1.setAttribute("onclick", "selectrow1(this)"); 
var table1row2 = document.getElementById("table1row2"); 
table1row2.setAttribute("level", 2); 
table1row2.setAttribute("onclick", "selectrow1(this)"); 
var table2row1 = document.getElementById("table2row1"); 
table2row1.setAttribute("level", 3); 
table2row1.onclick = function() { selectrow2(this) }; 
var table2row2 = document.getElementById("table2row2"); 
table2row2.setAttribute("level", 4); 
table2row2.onclick = function() { selectrow2(this) }; 
} 
var CurrentSelectRow1 = null; 
function selectrow1(newSelectRow) { 
if (CurrentSelectRow1 != null) { 
CurrentSelectRow1.style.backgroundColor = '#ffffff'; 
} 
newSelectRow.style.backgroundColor = 'PeachPuff'; 
CurrentSelectRow1 = newSelectRow; 
} 
var CurrentSelectRow2 = null; 
function selectrow2(newSelectRow) { 
if (CurrentSelectRow2 != null) { 
CurrentSelectRow2.style.backgroundColor = '#ffffff'; 
} 
newSelectRow.style.backgroundColor = '#ff0000'; 
CurrentSelectRow2 = newSelectRow; 
} 
function button1_click() { 
var table1row1 = document.getElementById("table1row1"); 
var level = table1row1.getAttribute("level"); 
var desc1 = "table1row1 level:" + level + "\r\ntypeof(level) = " + (typeof (level)).toString(); 
alert(desc1); 
var onclick1 = table1row1.getAttribute("onclick"); 
var desc2 = "table1row1 onclick:" + onclick1.toString() + "\r\ntypeof(onclick) = " + (typeof (onclick1)).
toString(); 
alert(desc2); 
} 
function button2_click() { 
var table2row1 = document.getElementById("table2row1"); 
var level = table2row1.getAttribute("level"); 
var desc1 = "table2row1 level:" + level + "\r\ntypeof(level) = " + (typeof (level)).toString(); 
alert(desc1); 
var onclick1 = table2row1.onclick; 
var desc2 = "table2row1 onclick:" + onclick1.toString() + "\r\ntypeof(onclick) = " + (typeof (onclick1)).
toString(); 
alert(desc2); 
} 
</script> 
</head> 
<body onload="pageLoad();"> 
<div style="width: 600px"> 
<span>table1</span> 
<table cellspacing="0" rules="all" border="1" id="table1" style="border-width: 1px; 
border-style: Solid; width: 100%; border-collapse: collapse;"> 
<tr id="table1row0"> 
<td align="center" style="width: 50%;"> 
No. 
</td> 
<td align="center" style="width: 50%;"> 
Item 
</td> 
</tr> 
<tr id="table1row1"> 
<td align="center" style="width: 50%;"> 
1 
</td> 
<td align="left" style="width: 50%;"> 
2C.40E80.041 
</td> 
</tr> 
<tr id="table1row2"> 
<td align="center" style="width: 50%;"> 
2 
</td> 
<td align="left" style="width: 50%;"> 
4L.013Y2.003 
</td> 
</tr> 
</table> 
<input type="button" id="button1" onclick="return button1_click();" /> 
</div> 
<div style="width: 600px"> 
<br /> 
<span>table2</span> 
<table cellspacing="0" rules="all" border="1" id="table2" style="border-width: 1px; 
border-style: Solid; width: 100%; border-collapse: collapse;"> 
<tr id="table2row0"> 
<td align="center" style="width: 50%;"> 
No. 
</td> 
<td align="center" style="width: 50%;"> 
Item 
</td> 
</tr> 
<tr id="table2row1"> 
<td align="center" style="width: 50%;"> 
1 
</td> 
<td align="left" style="width: 50%;"> 
4G.0QE18.001 
</td> 
</tr> 
<tr id="table2row2"> 
<td align="center" style="width: 50%;"> 
2 
</td> 
<td align="left" style="width: 50%;"> 
2K.61209.208 
</td> 
</tr> 
</table> 
<input type="button" id="button2" onclick="return button2_click();" /> 
</div> 
</body> 
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：瀏覽器 getattribute 在不同

熱門焦點(diǎn)

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

javascriptsetAttribute,getAttribute在不同瀏覽器上的不同表現(xiàn)_javascript技巧

最新推薦

猜你喜歡

熱門推薦