javascript - 使用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

heightDOM对象的属性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());