您的位置：首页 > 运维架构

动态改变select元素的option时宽度发生变化解决方法

2014-05-19 11:28 302 查看

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function addOption() {

var obj = document.getElementById('lst1');
var opn = document.createElement("OPTION");
//obj.appendChild(opn);//先增加子元素
opn.innerText = 11;
opn.value = 11;
//obj.appendChild(opn);//后增加子元素
}
</script>
</head>
<body>
<div>
代码不应该是先设置属性在追加节点，而应该是先追加节点再设置属性。
原因是DOM要先增加节点然后设置属性，否则会有reflow发生。
</div>
<table style="width: 500px;">
<tbody>
<tr>
<td style="width: 100%; border: solid 1px;">
<select id="lst1" style="width: 95%;">
<option>1</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" value="show" onclick="addOption()" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航