javascript setAttribute, getAttribute 在不同浏览器上的不同表现
测试环境（客户端浏览器 ）
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中的property和attribute介绍
首先看看这两个单词的英文释义(来自有道词典).先是property: 复制代码 代码如下: property ['prɔpəti] n. 性质,性能:财产:所有权 英英释义: any area set aside for a particular purpose "the president was concerned about the property across from the White House" 同义词:place something owned; any tangi
-
javascript中attribute和property的区别详解
DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为"特性",property翻译成中文术语为"属性",从中文的字面意思来看,确实是有点区别了,先来说说attribute. attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数
-
javascript中setAttribute()函数使用方法及兼容性
setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性. 语法结构: el.setAttribute(name,value) 参数列表: 参数 描述 name 必需.规定要设置的属性名. value 必需.规定要设置的属性值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <script type="text/javas
-
jQuery使用attr()方法同时设置多个属性值用法实例
本文实例讲述了jQuery使用attr()方法同时设置多个属性值的用法.分享给大家供大家参考.具体如下: 下面这个演示例子可通过点击按钮实现修改链接与提示的功能. <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button&q
-
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
根据大体上的意思我感觉js setAttribute与jquery中attr工作是完全一样的,只是jquery中简写了并且工能更强大了,下面我来分别介绍一下他们的用法. attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attributes 用来获取dom元素 的所有属性集合. 话不多说,上例子了: <input type="text" name=&
-
Jquery attr()方法 属性赋值和属性获取详解
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. 1. attr( 属性名 ) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined ) 2. attr( 属性名, 属性值 ) //设置属性的值 (为所有匹配的元素设置一个属性值.) 3. att
-
jQuery使用元素属性attr赋值详解
复制代码 代码如下: 1.$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src") 2.$("Element".attr(key,value)") '某一个元素设置属性 3.$("Element".attr({key:value,key1:value,....})) '为某个元素一次性设置多个属性 4.$("Elemen
-
JavaScript中setAttribute用法介绍
setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值.1.样式问题setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号.vName代表对样式赋值.例如: 复制代码 代码如下: var input = document.createElement("input");input.setAttribut
-
js中的getAttribute方法使用示例
getAttribute()方法 至此,我们已经向大家介绍了两种检索特定元素节点的办法:一种是使用getElementById()方法,另一种是使用getElementsByTagName()方法.在找到那个元素后,我们就可以利用getAttribute()方法把它的各种属性的值查询出来. getAttribute()方法是一个函数.它只有一个参数--你打算查询的属性的名字: object.getAttribute(attribute) 不过,getAttribute()方法不能通过docume
-
js setattribute批量设置css样式
firefox等可以使用 var dom=document.getElementById("name"); dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;") ; IE中则必须使用style.cssText var dom=document.getElementById("name"); dom1.style.cssText = &q
-
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
getAttribute:取得属性:setAttribute:设置属性: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content=&q