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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
javascript实现雪花飘落效果
Aug 19 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 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
详解python中index()、find()方法
2019/08/29 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python程序控制语句用法实例分析
2020/01/14 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
django创建css文件夹的具体方法
2020/07/31 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
资产经营总监岗位职责
2013/12/04 职场文书
幼儿教师国培感言
2014/02/19 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
MySQL的索引你了解吗
2022/03/13 MySQL
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers