javascript - 如何使用javascript根据另一个div高度设置一个div高度？

Question

我有 2 个 div。由于 div 1 可能更长，即无限滚动 div，我想使用 javascript 使 div 2 与 div 1 具有相同的高度。我尝试使用下面的代码，但它不起作用。为什么？

javascript:

<script type="text/javascript">
document.getElementById("div2").setAttribute("height",document.getElementById("div1").clientHeight);
</script>

我的 div：

#div1 {
width: 700px;
background: #FFF;
overflow: hidden;
float: left;
}

#div2 {
width: 300px;
background-image: url(../images/user_panel.png);
background-repeat:repeat-y;
}

Answer 1

那这个呢：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div2.style.height = div1.style.height; // Might have to add +"px" here.

只是从我的头顶。

Answer 2

该setAttribute函数是一个 DOM 函数，用于向 HTML 元素添加新属性。您正在尝试height在 div 上添加 。那会产生以下效果：

<div id="div2" height="...">...</div>

但是 HTML 没有定义这样的heightHTML 元素属性。

您正在寻找的是设置 DOM 元素的样式。那将是styleDOM 元素属性。在里面style你有height你必须设置的属性：

document.getElementById("div2").style.height = document.getElementById("div1").clientHeight + "px";

在上面的代码示例中，您可能还会考虑div1' 填充（可能会将其带入计算）。这是因为clientHeight包括填充但style.height不包括填充。

Answer 3

这应该可以解决问题：

document.getElementById("div2").style.height=document.getElementById("div1").clientHeight+'px';