DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript setAttribute, getAttribute 在不同浏覽器上的不同表現
javascript setAttribute, getAttribute 在不同浏覽器上的不同表現
編輯：關於JavaScript
測試環境（客戶端浏覽器 ）
IE6，IE7， IE8兼容模式， IE8
Firefox 3.6.8, google chrome 5.0.375.125
先來說明兩個函數的標准定義。
elementNode.setAttribute(name,value)
name 必需。規定要設置的屬性名。
value 必需。規定要設置的屬性值。
該方法把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
elementNode.getAttribute(name)
name 必需。規定從中取得屬性值的屬性。
一、setAttribute的問題
elementNode為<tr>...</tr>
希望對其增加一個單擊行的事件處理函數，
寫法1：
table1row1.setAttribute("onclick", "selectrow1(this)");
IE8, Firefox, google chrome 能正確觸發click 事件
IE6，IE7則不能觸發click 事件。
寫法2：
table2row1.onclick = function() { selectrow2(this) };
所有測試浏覽器均能觸發click 事件
故為了兼容在不同的IE中，我們可以統一使用如下語句。
table2row1.onclick = function() { selectrow2(this) };
二、getAttribute的問題
elementNode為 <tr>...</tr>
先用setAttribute設置屬性
table1row1.setAttribute("level", 1);
再用getAttribute來獲取標簽的屬性值
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
為統一處理此兩種情況，代碼統一如下：
復制代碼 代碼如下:
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) });
下面為測試的html代碼
復制代碼 代碼如下:
<!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>
IE6，IE7， IE8兼容模式， IE8
Firefox 3.6.8, google chrome 5.0.375.125
先來說明兩個函數的標准定義。
elementNode.setAttribute(name,value)
name 必需。規定要設置的屬性名。
value 必需。規定要設置的屬性值。
該方法把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
elementNode.getAttribute(name)
name 必需。規定從中取得屬性值的屬性。
一、setAttribute的問題
elementNode為<tr>...</tr>
希望對其增加一個單擊行的事件處理函數，
寫法1：
table1row1.setAttribute("onclick", "selectrow1(this)");
IE8, Firefox, google chrome 能正確觸發click 事件
IE6，IE7則不能觸發click 事件。
寫法2：
table2row1.onclick = function() { selectrow2(this) };
所有測試浏覽器均能觸發click 事件
故為了兼容在不同的IE中，我們可以統一使用如下語句。
table2row1.onclick = function() { selectrow2(this) };
二、getAttribute的問題
elementNode為 <tr>...</tr>
先用setAttribute設置屬性
table1row1.setAttribute("level", 1);
再用getAttribute來獲取標簽的屬性值
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
為統一處理此兩種情況，代碼統一如下：
復制代碼 代碼如下:
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) });
下面為測試的html代碼
復制代碼 代碼如下:
<!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>
小編推薦
熱門推薦