javascript - 使用javascript设置相同高度后的Div高度不一样

Question

我有两个 div，我希望它们的长度相等。 Div1 中包含确定其高度的文本。 div2 是一个滚动框，其表观高度应与 div1 相同。以下代码

    <script>
    var div1Height = ((document.getElementById('div1').offsetHeight) + 'px');
    document.getElementById('div2').style.height = div1Height;
    </script>

使 div2 的高度几乎与 div1 相同，但不完全相同。我怀疑脚本运行后应用了一些填充或边距，但在删除所有这些后，两个高度仍然不匹配。有什么办法可以解决这个问题吗？

Answer 1

您正在使用两种不同的测量高度的方法。在 div1 中使用 offsetHeight，在 div2 中使用 style.height。

改变

var div1Height = ((document.getElementById('div1').offsetHeight) + 'px');

到

var div1Height = ((document.getElementById('div1').style.height) + 'px');

那么您将获得相同的值，因为您使用的是相同的测量方法。

请注意，您已设置 style="height:[x] px;"在 div1 上使其工作，因为 style.height 从元素的样式属性中检索(高度)信息。

我不知道你为什么要在 javascript 中这样做。您可能有自己的理由，但纯 css 几乎肯定也可以工作(当然取决于您想要实现的目标)