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

最新推荐文章于 2023-04-04 19:07:30 发布

名贤集

最新推荐文章于 2023-04-04 19:07:30 发布

阅读量1.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/QQ282030166/article/details/26228943

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<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>