在IE下用getAttribute时要小心

作者：Rank 来源：never-online weblog 时间：2008-08-21 12:54:00　

在做DHTML时，我们在某些情况下要用setAttribute(attri, value)方法定义元素的attribute。同时与getAttribute(attri)配对来得到相应的自定义attribute的值。

但在IE下要小心。getAttrubite方法，其官方文档里描述它的返回值是这样说的：

Return Value
Variant. Returns a string, number, or Boolean, defined by sAttrName. If an explicit attribute doesn't exist, an empty string is returned. If a custom attribute doesn't exist, null is returned.
返回值
变体。返回一个定义attribute时的字符串，数字，或者布尔值，如果这个已有属性不存在，则是一个空字符串，如果一个自定义的attribute不存在，则返回null。

下面来做个自定义实验

上面的示例可以看到的确如文档中描述的那样，返回值没有异议。

在select控件中，我们可以用selectObject.value来得到或者设置某个控件的值。比如：

<select id="ctlSelect">
  <option value="">- please select -</option>
  <option value="1">opt1</option>
  <option value="2" selected>opt2</option>
  <option value="3">opt3</option>
  <option value="4">opt4</option>
  </select>
  <button onclick="document.getElementById('ctlSelect').value=''">set value</button>

但是将上面两个例子(getAttribute与select)结合起来用的话，效果就与我们想象中的不一样了。
下面的例子是一个select联动的效果，也就是选择第一个select，对应的value会赋值得第二个select上。
（下例中select控件第一个选项是空字符串）当选中第一个选项时，你会发现第二个select中竟没有任何一个选项被选中。与上例我们所写的示例代码相矛盾。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Rank's HTML document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" title="default" media="screen"> /*<![CDATA[*/ body { font-size:80％; line-height:1.5; } body, button { font-family:arial; } button { padding:0 0.3em 0 0.3em; } h1, h3 { margin:0; padding:0; } h1 { font-size:2.3em; } h3 { font-size:1.3em; } form { display:inline-block; } div.link { padding:1em; } div.content { background:#ffc; padding:1em; border:1px solid #222; margin:1em 0 1em; } #rdoWrapper { } #hd { text-align:center; } /*]]>*/ </style> </head> <body> <div id="hd"> <h1> IE on of select bug about getAttribute method </h1> <div class="link">from: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a></div> </div> <div id="rdoWrapper" class="content"> <h3> 1. bug (the first value is a empty string) </h3> <select id="ctlSelect1" onchange="chg_ctl(this, 'ctlSelect2')"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> <select id="ctlSelect2"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> </div> <script type="text/javascript">//<![CDATA[ function ref(id) { return document.getElementById(id); } function chg_ctl(ctl, ctlid) { ctl.setAttribute('def', ctl.value); foo.apply(null, arguments); } function foo(ctl, ctlid, forceString) { ref(ctlid).value = forceString ? ctl.getAttribute('def')+'' : ctl.getAttribute('def'); } //]]></script> </body></html>

这个bug的解决方法很简单，只需要我们手工强制转型。但这不得不让我怀疑IE里selectObject.value处理机制。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Rank's HTML document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online" /> <style type="text/css" title="default" media="screen"> /*<![CDATA[*/ body { font-size:80％; line-height:1.5; } body, button { font-family:arial; } button { padding:0 0.3em 0 0.3em; } h1, h3 { margin:0; padding:0; } h1 { font-size:2.3em; } h3 { font-size:1.3em; } form { display:inline-block; } div.link { padding:1em; } div.content { background:#ffc; padding:1em; border:1px solid #222; margin:1em 0 1em; } #rdoWrapper { } #hd { text-align:center; } /*]]>*/ </style> </head> <body> <div id="hd"> <h1> IE on of select bug about getAttribute method </h1> <div class="link">from: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a></div> </div> <div id="rdoWrapper" class="content"> <h3> 1. bug </h3> <select id="ctlSelect1" onchange="chg_ctl(this, 'ctlSelect2')"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> <select id="ctlSelect2"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> </div> <div class="content"> <h3> 2. fixed </h3> <select id="ctlSelect3" onchange="chg_ctl(this, 'ctlSelect4', true)"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> <select id="ctlSelect4"> <option value="">- please select -</option> <option value="1">opt1</option> <option value="2" selected>opt2</option> <option value="3">opt3</option> <option value="4">opt4</option> </select> </div> <script type="text/javascript">//<![CDATA[ function ref(id) { return document.getElementById(id); } function chg_ctl(ctl, ctlid) { ctl.setAttribute('def', ctl.value); foo.apply(null, arguments); } function foo(ctl, ctlid, forceString) { ref(ctlid).value = forceString ? ctl.getAttribute('def')+'' : ctl.getAttribute('def'); } //]]></script> </body></html>

bug虽小，但却是个不大不小的陷阱，一旦你不小心掉了进去，在大量的代码中寻找这个bug着实会让你头痛。

标签：getAttribute,ie,javascript

投稿

在IE下用getAttribute时要小心

猜你喜欢

Magic Photo Frame 神奇创意相框

网页布局设计基础

SQL Server 2008数据挖掘查询任务

asp访google分页代码

不通过数据源名DSN也能访问Access数据库吗？

File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

asp如何用FSO对象显示一个文本文件？

栅格:一以贯之

深入透析样式表滤镜(上)

asp是的日期转换为星座的函数

FF和IE之间7个JavaScript的差异[译]

FSO遍历文件夹目录及目录下文件asp代码

简要介绍SQL Server 2008新的事件处理系统

客户端和服务端的编码“陷阱”

学习ASP.NET八天入门：第七天

深入浅出SQL嵌套SELECT语句

xhtml+css VS div+css

SQL Server转换为XQuery及反向转换

System.Data.OleDb.OleDbDataAdapter与System.Data.OleDb.OleDbDataReader的区别是什么？

服务器端控件是如何操作的？