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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
PHP的PDO连接讲解
2019/01/24 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python学习数据结构实例代码
2015/05/11 Python
Python实现Dijkstra算法
2018/10/17 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
战友聚会邀请函
2014/01/18 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
校园标语大全
2014/06/19 职场文书
最新离婚协议书范本
2014/08/19 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS