JQuery变量计算问题：数值变量相减返回NaN

你遇到的问题核心是：$('.container').css("height")返回的不是纯数值，而是带单位的字符串（比如"800px"），直接和数字做减法运算时，字符串无法被正确转换为数值，所以结果是NaN。

正确的解决方式有两种： #

方法1：用jQuery的height()方法获取纯数值

height()方法会直接返回元素的高度数值（不带单位），可以直接参与计算：

var line_height = $('.container').height(); 
console.log(line_height); // 输出纯数字，比如800
$('.vertical-line').height(line_height - 1000);

方法2：手动转换带单位的字符串为数值

如果必须使用css("height")，可以用parseInt或parseFloat提取字符串里的数值：

var line_height_str = $('.container').css("height"); 
// 用parseInt提取整数高度，第二个参数10指定十进制
var line_height = parseInt(line_height_str, 10);
// 如果需要处理小数高度（比如带.5px的情况），用parseFloat
// var line_height = parseFloat(line_height_str);

$('.vertical-line').height(line_height - 1000);

为什么你之前的选项都无效？ #

• 选项1：直接把带单位的字符串传给height()，jQuery虽然能识别并设置高度，但没有解决你需要"减1000"的计算需求
• 选项2、3：都是直接用带px的字符串和数字做减法，字符串无法被正确解析为数值，运算结果只能是NaN，自然无法设置正确的高度

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