问题发生在使用javascript动态创建dom元素的时候。
先上代码:
1
554<body>
// 页面中先放置一个空的 p 用来在其中创建其他元素
<p id="p"></p>
// 这里开始代码
<script type="text/javascript">
var p = document.getElementById("p");
// 创建一个按钮先
var button = document.createElement("button");
button.innerHTML = "BUTTON";
p.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);
// 然后打印一下 p 的宽度
// 结果为: 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是不对的。
而在创建后，再次计算才是正确的。
想问下这个是什么原因呢？谢谢。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你都
button.appendChild(span1);了两个按钮都不太一样了，所以有高度差是很正常的吧？