javascript setAttribute, getAttribute 在不同浏览器上的不同表现

更新时间：2010年08月05日 14:48:20 作者：

该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

测试环境（客户端浏览器）
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> 

您可能感兴趣的文章:

javascript中for...of和for..in循环的区别
JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
javascript日期格式化方法汇总
本文给大家汇总介绍了javascript格式化日期时间的几种常用方法，个人对最后一种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用这种，推荐给小伙伴们。
2015-10-10
解决layui的input独占一行的问题
今天小编就为大家分享一篇解决layui的input独占一行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript 使用for循环时该注意的问题-附问题总结
所谓for循环就是重复的执行一段代码，for循环也是希望在创建循环时常会用到的工具，这篇内容主要给大家介绍javascript 使用for循环时该注意的问题-附问题总结，需要的朋友可以参考下
2015-08-08
uniapp 使用定位示例详解
这篇文章主要为大家介绍了uniapp如何使用定位过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JS 简单实现滑块验证码
这篇文章主要为大家介绍了使用JS 简单实现滑块验证码示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JS手搓Promise的常见方法总结
这篇文章主要为大家详细介绍了JavaScript中手写Promise的一些常见方法,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下
2023-09-09
用Webpack构建Vue项目的实践
这篇文章主要介绍了用Webpack构建Vue项目的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
javascript 发布-订阅模式实例详解
这篇文章主要介绍了javascript 发布-订阅模式,结合实例形式详细分析了javascript发布-订阅模式基本功能、原理、实现方法与相关使用技巧,需要的朋友可以参考下
2023-06-06
浅谈在js传递参数中含加号(+)的处理方式
下面小编就为大家带来一篇浅谈在js传递参数中含加号(+)的处理方式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10