javascript中setAttribute、getAttribute 在不同浏览器上的不同表现
<div id="cnblogs_post_body">测试环境（客户端浏览器 ）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代码
复制代码 代码如下:
<div class="cnblogs_code">1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Test</title> 5 <script type="text/javascript" language="javascript"> 6 function pageLoad() { 7 var table1row1 = document.getElementById("table1row1"); 8 table1row1.setAttribute("level", 1); 9 table1row1.setAttribute("onclick", "selectrow1(this)"); 10 var table1row2 = document.getElementById("table1row2"); 11 table1row2.setAttribute("level", 2); 12 table1row2.setAttribute("onclick", "selectrow1(this)"); 13 var table2row1 = document.getElementById("table2row1"); 14 table2row1.setAttribute("level", 3); 15 table2row1.onclick = function() { selectrow2(this) }; 16 var table2row2 = document.getElementById("table2row2"); 17 table2row2.setAttribute("level", 4); 18 table2row2.onclick = function() { selectrow2(this) }; 19 } 20 var CurrentSelectRow1 = null; 21 function selectrow1(newSelectRow) { 22 if (CurrentSelectRow1 != null) { 23 CurrentSelectRow1.style.backgroundColor = '#ffffff'; 24 } 25 newSelectRow.style.backgroundColor = 'PeachPuff'; 26 CurrentSelectRow1 = newSelectRow; 27 } 28 var CurrentSelectRow2 = null; 29 function selectrow2(newSelectRow) { 30 if (CurrentSelectRow2 != null) { 31 CurrentSelectRow2.style.backgroundColor = '#ffffff'; 32 } 33 newSelectRow.style.backgroundColor = '#ff0000'; 34 CurrentSelectRow2 = newSelectRow; 35 } 36 function button1_click() { 37 var table1row1 = document.getElementById("table1row1"); 38 var level = table1row1.getAttribute("level"); 39 var desc1 = "table1row1 level:" + level + "\r\ntypeof(level) = " + (typeof (level)).toString(); 40 alert(desc1); 41 var onclick1 = table1row1.getAttribute("onclick"); 42 var desc2 = "table1row1 onclick:" + onclick1.toString() + "\r\ntypeof(onclick) = " + (typeof (onclick1)).toString(); 43 alert(desc2); 44 } 45 function button2_click() { 46 var table2row1 = document.getElementById("table2row1"); 47 var level = table2row1.getAttribute("level"); 48 var desc1 = "table2row1 level:" + level + "\r\ntypeof(level) = " + (typeof (level)).toString(); 49 alert(desc1); 50 var onclick1 = table2row1.onclick; 51 var desc2 = "table2row1 onclick:" + onclick1.toString() + "\r\ntypeof(onclick) = " + (typeof (onclick1)).toString(); 52 alert(desc2); 53 } 54 </script> 55 </head> 56 <body > 57 <div style="width: 600px"> 58 <span>table1</span> 59 <table cellspacing="0" rules="all" border="1" id="table1" style="border-width: 1px; 60 border-style: Solid; width: 100%; border-collapse: collapse;"> 61 <tr id="table1row0"> 62 <td align="center" style="width: 50%;"> 63 No. 64 </td> 65 <td align="center" style="width: 50%;"> 66 Item 67 </td> 68 </tr> 69 <tr id="table1row1"> 70 <td align="center" style="width: 50%;"> 71 1 72 </td> 73 <td align="left" style="width: 50%;"> 74 2C.40E80.041 75 </td> 76 </tr> 77 <tr id="table1row2"> 78 <td align="center" style="width: 50%;"> 79 2 80 </td> 81 <td align="left" style="width: 50%;"> 82 4L.013Y2.003 83 </td> 84 </tr> 85 </table> 86 <input type="button" id="button1"/> 87 </div> 88 <div style="width: 600px"> 89 <br /> 90 <span>table2</span> 91 <table cellspacing="0" rules="all" border="1" id="table2" style="border-width: 1px; 92 border-style: Solid; width: 100%; border-collapse: collapse;"> 93 <tr id="table2row0"> 94 <td align="center" style="width: 50%;"> 95 No. 96 </td> 97 <td align="center" style="width: 50%;"> 98 Item 99 </td> 100 </tr> 101 <tr id="table2row1"> 102 <td align="center" style="width: 50%;"> 103 1 104 </td> 105 <td align="left" style="width: 50%;"> 106 4G.0QE18.001 107 </td> 108 </tr> 109 <tr id="table2row2"> 110 <td align="center" style="width: 50%;"> 111 2 112 </td> 113 <td align="left" style="width: 50%;"> 114 2K.61209.208 115 </td> 116 </tr> 117 </table> 118 <input type="button" id="button2"/> 119 </div> 120 </body> 121 </html>
页:
[1]