jquery css高度设置未正常运行

Question

我正在尝试使用一些jQuery将我的产品和目录页(带有一个.columns类)的左列和右列设置为我的#detail <div>的高度，它有一些从SQL数据库中提取的数据。

因此，我使用以下jQuery代码：

$(document).ready(function() {

  detailHeight = $('#detail').css('height');
  columnHeight = detailHeight + 10;

  $('.columns').css('height', columnHeight 'px');

});

我的页面在这里：http://www.marioplanet.com/product.asp?IDnum=1

由于某些原因，高度不能正确地显示出来..

有什么想法可以解释原因吗？

谢谢!

Answer 1

你这里有一个打字错误：

$('.columns').css('height', columnHeight 'px');

缺少+：

$('.columns').css('height', columnHeight + 'px');

但是，正如其他人指出的那样，使用css()函数访问元素的高度对于您的代码来说是错误的，因为它返回的是一个在数值后带有CSS单位的字符串。因此，您实际上并不是在添加数字，而是在连接字符串。这就是你的代码不能工作的原因。

要修复您的代码，可以使用jQuery的便捷方法height()来获取元素的高度并将其设置为数值。只需在设置时将您的数字作为参数进行传递：

  detailHeight = $('#detail').height();
  columnHeight = detailHeight + 10;

  $('.columns').height(columnHeight);

Answer 2

你有没有试过.height()或者.attr("height")

Answer 3

$(document).ready(function() {

  detailHeight = $('#detail').css('height'); // would return something like 25px...
  columnHeight = detailHeight + 10; // 25px + 10 == ??

  $('.columns').css('height', columnHeight + 'px'); // ===>> .css('height', '25px10' + 'px');

});

建议，

$(document).ready(function() {

  detailHeight = $('#detail').height(); // use .height()
  columnHeight = detailHeight + 10; 

  $('.columns').css('height', columnHeight + 'px');

});