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

paranoid lv.1

发布时间：2022-11-29 03:24:22 306

相关标签： # javascript# html# webkit# java# java

<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" οnclick="addOption()" />
</body>
</html>

文章来源： https://blog.51cto.com/u_1236522/5880313

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。