Close Advertisement
但在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。
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。
<!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> getAttribute example </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. e.g please select a option</h3>
<select id="ctlSelect" onchange="chg_ctl(this, this.value)"><option value="">select value</option><option value="">empty value</option></select>
</div>
<script type="text/javascript">//<![CDATA[
function chg_ctl(ctl, value) {
ctl.setAttribute('def', value);
alert(ctl.getAttribute('def').constructor)
}
//]]></script>
</body>
</html>
上面的示例可以看到的确如文档中描述的那样，返回值没有异议。"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> getAttribute example </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. e.g please select a option</h3>
<select id="ctlSelect" onchange="chg_ctl(this, this.value)"><option value="">select value</option><option value="">empty value</option></select>
</div>
<script type="text/javascript">//<![CDATA[
function chg_ctl(ctl, value) {
ctl.setAttribute('def', value);
alert(ctl.getAttribute('def').constructor)
}
//]]></script>
</body>
</html>
在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>
<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>
"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着实会让你头痛。 "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>
![[stun]](styles/g/images/smilies/icon_stun.gif){kind=icon}
[最后修改由 Rank, 于 2008-07-20 20:44:04]
评论Feed: http://www.never-online.net/blog/feed.asp?q=comment&id=228
这篇日志没有评论.
