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 相关文章推荐
表单提交验证类
Jul 14 Javascript
Prototype使用指南之hash.js
Jan 10 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
如何在JavaScript中正确处理变量
Dec 25 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
php cli 小技巧
2013/06/03 PHP
php权重计算方法代码分享
2014/01/09 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
php源码的安装方法和实例
2019/09/26 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python实现简易端口扫描器代码实例
2017/03/15 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
如何通过Python实现标签云算法
2019/07/02 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
数学检讨书1000字
2014/02/24 职场文书
老师对学生的评语
2014/04/18 职场文书
项目经理任命书
2014/06/04 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
庆祝国庆节标语
2014/10/09 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers