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

ie7 动态改变select option时，宽度自动变短解决方法

2013-11-07 16:46 197 查看

<html>
<head>

<title>JQuery</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript">
function add(){
var obj = document.getElementById('lst1');
var opn = document.createElement("OPTION");
obj.appendChild(opn);//先追加
opn.innerText = 11;
opn.value = 11;

}
function add1(){
var obj = document.getElementById('lst1');
var opn = document.createElement("OPTION");
opn.innerText = 11;
opn.value = 11;
obj.appendChild(opn);//后追加 ie7 会出问题

}
</script>
</head>

<body>
<table style="width:500px;">
<tr>
<td style="width:100%;">
<select id="lst1" style="width:95%;">
<option>1</option>
</select>
</td>
</tr>
</table>
<input type="button" value="先追加" onclick="add();">
<input type="button" value="后追加" onclick="add1();">
</body>
</html>

代码不应该是先设置属性在追加，而应该是先追加再设置属性。

原因是追加DOM要先追加后设置属性，否则会有reflow发生。

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

标签：

相关文章推荐

新的分享

章节导航