Javascript getComputedStyle宽度问题（将跨度元素作为子元素）

我正在使用electron.js+bootstap，我有一个按钮，并试图获得它的实际功能

<button id="button" class="btn btn-danger" style="width: 100%; height: 100%; resize: none;">
BUTTON1
<span class="glyphicon glyphicon-music"></span>
</button>

是“100.438px”

如果我删除span图标，只留下button元素，那么chrome调试器和我的代码中的值是相同的

感谢您的建议：）

更新：

这是一个

输出为：

width 1: 72.5312px
width 2: 82.6562px            <======   what I want is 86.5312px
width 3: 86.5312px
width onclick 3: 86.5312px
width onclick 3: 86.5312px
width onclick 3: 86.5312px

或者使用jquery

$(button).hide().show(0);

但它仍然不起作用

更新：

我试图移除按钮，只留下span元素，但我发现仍然无法获得正确的宽度值

因此，使用getComputedStyle获取span元素的值可能会有问题

var div = document.getElementById("div");

var span = document.createElement("span");
span.className = "glyphicon glyphicon-music";
div.appendChild(span);

console.log("width 1: " + getComputedStyle(span).width);

setTimeout(function() {
    console.log("width 2: " + getComputedStyle(span).width);
}, 3000);

输出为：

width 1: 10.125px
width 2: 14px

---

按钮上有2个边框吗？我想没有。我在jsfiddle上添加了一个演示：也许你可以看看，谢谢：）问题似乎是在插入元素之后，Chrome还没有呈现图标。您可以通过使用警报而不是console.log看到这一点。我不确定是否有比setTimeout更好的解决方案。我也认为这就是问题所在，所以我尝试了一些在这个网站上找到的“强制DOM更新”方法（但两者都不起作用）。你可以看到更新的信息。

$(button).hide().show(0);

var div = document.getElementById("div");

var span = document.createElement("span");
span.className = "glyphicon glyphicon-music";
div.appendChild(span);

console.log("width 1: " + getComputedStyle(span).width);

setTimeout(function() {
    console.log("width 2: " + getComputedStyle(span).width);
}, 3000);

width 1: 10.125px
width 2: 14px