使用javascript动态更改div的高度不起作用

Question

我有两个div。第一个div的高度随着第二个div的高度而变化。但是代码似乎有些麻烦。我的代码如下。 例如，

<div id="profile1">akdsfkj</div>

<div id="schedules1" style="min-height:150px;"></div>

<script>
document.getElementById('profile1').style.height=$('#schedules1').height();
</script> 

提前致谢

Answer 1

DOM height对象上的style属性需要单位，但jQuery的height()方法只返回一个数字（像素）。所以：

document.getElementById('profile1').style.height=$('#schedules1').height() + "px";
// Change ----------------------------------------------------------------^^^^^^^

但请注意，style元素的schedules1属性无效，您使用min:height:150px而不是min-height:150px。 （现在问题已解决。）

此外，以这种方式混合jQuery和直接DOM代码有点奇怪。使用所有jQuery：

$('#profile1').css("height", $('#schedules1').height());

Answer 2

通过使用Jquery，我们可以做到这一点..

var fheight=$('#profile1').height();
$('#schedules1').css('height',fheight);

Answer 3

这有效（jsfiddle）：

HTML（将min:height更改为min-height）：

<div id="profile1">akdsfkj</div>
<div id="schedules1" style="min-height:150px;"></div>

JavaScript（使用jQuery设置height）：

$('#profile1').height($('#schedules1').height());