在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时要小心

猜你喜欢

MySQL DQL语句的具体使用

python Tornado框架的使用示例

Python编程实现的简单Web服务器示例

Python整数与Numpy数据溢出问题解决

js模态对话框使用方法详解

Python操作Redis之设置key的过期时间实例代码

1亿条数据在PHP中实现Mysql数据库分表100张

浅谈DataFrame和SparkSql取值误区

Vue调用后端java接口的实例代码

Python多线程编程之多线程加锁操作示例

python中的内置函数max()和min()及mas()函数的高级用法

Python sqlalchemy时间戳及密码管理实现代码详解

MySQL的之表结构修改

使用Keras加载含有自定义层或函数的模型操作

Pytorch训练过程出现nan的解决方式

python中如何提高图像质量

分享python数据统计的一些小技巧

打包发布Python模块的方法详解

TensorFlow2.X使用图片制作简单的数据集训练模型

PyTorch中的Variable变量详解