jquery css高度设置无法正常工作

发布于 2024-09-24 02:31:15 字数 583 浏览 3 评论 0原文

我正在尝试使用一些 jQuery 将产品和目录页面的左右列（具有 .columns 类）设置为我的 #detail 的高度

其中包含从 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

由于某种原因，高度无法正确显示。

您知道为什么吗？

谢谢！

原文

I'm trying to use some jQuery to set the left and right columns of my product and catalog pages (with a class of .columns) to the height of my #detail <div> which has some data pulled from a SQL database.

So, I am using this jQuery code:

$(document).ready(function() {

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

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

});

My page is here: http://www.marioplanet.com/product.asp?IDnum=1

For some reason, the heights are not coming out properly..

Any ideas as to why?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黑白记忆 2024-10-01 02:31:15

这里有一个拼写错误：

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

缺少 +：

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

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

要修复您的代码，请使用 jQuery 的便捷方法 height() 来获取和设置元素的高度改为数值。设置时只需将您的号码作为参数传递即可：

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

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

You have a typo here:

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

The + is missing:

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

But, as pointed out by others, using the css() function to access the height of an element is wrong for your code as it returns and expects a string with a CSS unit after the numeric value. Therefore you're not really adding numbers but concatenating strings. That's why your code doesn't work.

To fix your code, use jQuery's convenience method height() for getting and setting the height of an element as a numeric value instead. Simply pass in your number as the argument when setting it:

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

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

回复收藏 0 原文

破晓 2024-10-01 02:31:15

您是否尝试过 .height() 甚至 .attr("height")？

回复收藏 0 原文

左耳近心 2024-10-01 02:31:15

$(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');

});

$(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');

});

suggestion,

$(document).ready(function() {

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

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

});

回复收藏 0 原文

世界等同你 2024-10-01 02:31:15

正如每个人都提到在最后一个语句中缺少“+”符号，但是当我对变量columnHeight（使用我的示例）运行alert()时，它显示20px10。我将detailHeight 包裹在parseInt() 中并且它起作用了。

HTML 代码片段


<div id="detail" style="background:#aaa;">HELLO</div>
<div id="x" class="columns" style="background:#f00;">HELLO</div>

JS 代码片段


$(document).ready(function() {
  detailHeight = $('#detail').css('height');
  columnHeight = parseInt(detailHeight) + 10;

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

As everyone has mentioned the missing '+' symbol in the last statement, but when I ran alert() on the variable columnHeight (using my example) it showed 20px10. I wrapped detailHeight inside a parseInt() and it worked.

HTML Snippet


<div id="detail" style="background:#aaa;">HELLO</div>
<div id="x" class="columns" style="background:#f00;">HELLO</div>

JS Snippet


$(document).ready(function() {
  detailHeight = $('#detail').css('height');
  columnHeight = parseInt(detailHeight) + 10;

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

回复收藏 0 原文

~没有更多了~