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


Posted in Javascript onAugust 05, 2010

测试环境(客户端浏览器 )
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 中显示
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
table1row1 level:1
typeof(level) = number

在IE8, Firefox, google chrome中显示
javascript setAttribute, getAttribute 在不同浏览器上的不同表现

javascript setAttribute, getAttribute 在不同浏览器上的不同表现
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 相关文章推荐
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
Javascript浅谈之this
Dec 17 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
vue环境搭建简单教程
Nov 07 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
javascript new后的constructor属性
Aug 05 #Javascript
FileUpload上传图片(图片不变形)
Aug 05 #Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 #Javascript
js继承的实现代码
Aug 05 #Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 #Javascript
JS 实现完美include载入实现代码
Aug 05 #Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 #Javascript
You might like
php解析json数据实例
2014/08/19 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python实现类的静态变量用法实例
2015/05/08 Python
图解Python变量与赋值
2018/04/03 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
python如何求100以内的素数
2020/05/27 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
门卫工作岗位职责
2013/12/17 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
服务理念口号
2014/06/11 职场文书
金融管理专业求职信
2014/07/10 职场文书
爱的教育读书笔记
2015/06/26 职场文书