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.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
纯js实现手风琴效果
Apr 17 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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执行速度全攻略(上)
2006/10/09 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
教师群众路线学习心得体会
2014/11/04 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript