如何在alert弹窗中正确输出存储于变量中的元素高度？

你的代码里有两个关键问题导致alert弹窗显示异常，我来帮你拆解清楚：

1. 混淆了jQuery height()方法的两种用法

   • 当你给height()传入参数时（比如$('.item1').height($('.item2').outerHeight())），它的作用是设置元素高度，而不是获取高度。而且这个方法执行后返回的是jQuery对象本身，不是具体的高度数值，所以你alert出来的会是类似[object Object]的异常内容。
   • 如果你要获取元素高度，需要不带参数调用height()，比如$('.item1').height()。

2. 操作顺序有误
   你的需求是先把item1的高度设置为item2的outerHeight，再弹出这个高度值。所以得先完成设置操作，再单独去获取高度数值。

修正后的代码 #

function number() {
    // 第一步：设置item1的高度为item2的outerHeight
    $('.item1').height($('.item2').outerHeight());
    // 第二步：获取item1的高度数值
    var heightValue = $('.item1').height();
    alert(heightValue);
}
number();

你也可以简化成下面的写法，先把item2的高度存起来，再复用这个值：

function number() {
    var item2Height = $('.item2').outerHeight();
    $('.item1').height(item2Height);
    alert(item2Height);
}
number();

补充小提示 #

• 如果想要包含item2的外边距来计算高度，可以给outerHeight()传true参数：$('.item2').outerHeight(true)。
• 记得确保代码在DOM完全加载后执行（比如包裹在$(document).ready()里），否则可能因为元素还没渲染完成，获取到的高度为0。

内容的提问来源于stack exchange，提问作者Piotr