getComputedStyle 在appendChild后获取元素宽度的问题

问题发生在使用javascript动态创建dom元素的时候。

先上代码:

<body>
// 页面中先放置一个空的 div 用来在其中创建其他元素
<div id="div"></div>

// 这里开始代码
<script type="text/javascript">

    var div = document.getElementById("div");
    
    // 创建一个按钮先    
    var button = document.createElement("button");
    button.innerHTML = "BUTTON";
    div.appendChild(button);
    button.onclick = function() {
        // 点击按钮后同样打印一下
        // 结果是 style.width onclick: 86.5312px
        var style = getComputedStyle(button);
        console.log("style.width onclick: " + style.width);
    };

    // 再来1个 span 的小图标，这里用到了 bootstrap的 css
    var span1 = document.createElement("span");
    span1.className = "glyphicon glyphicon-music";
    button.appendChild(span1);
    
    // 然后打印一下 div 的宽度
    // 结果为:   style.width: 82.6562px
    var style = getComputedStyle(button);
    console.log("style.width: " + style.width);

</script>
</body>

在页面创建后，打印出的 width 的值是82.6562px
而在chrome debugger调试工具(Elements=>Computed)中显示的值，却是 86.5312px。

也就是说，在创建 button后，立刻计算出的width是不对的。

而在创建后，再次计算才是正确的。

想问下这个是什么原因呢？谢谢。

你都button.appendChild(span1);了
两个按钮都不太一样了，所以有高度差是很正常的吧？

【热门文章】