jquery css高度设置无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3748683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery css height setting not functioning properly
提问by Qcom
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.
我正在尝试使用一些 jQuery 将我的产品和目录页面（类为.columns）的左列和右列设置为我的高度，#detail<div>其中有一些从 SQL 数据库中提取的数据。
So, I am using this jQuery code:
所以，我正在使用这个 jQuery 代码：
$(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
我的页面在这里：http: //www.marioplanet.com/product.asp?IDnum=1
For some reason, the heights are not coming out properly..
出于某种原因，高度没有正确显示出来。
Any ideas as to why?
关于为什么的任何想法？
Thanks!
谢谢！
回答by BoltClock
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.
但是，正如其他人指出的那样，使用该css()函数访问元素的高度对于您的代码来说是错误的，因为它返回并期望在数值之后带有 CSS 单元的字符串。因此，您实际上并不是在添加数字，而是在连接字符串。这就是为什么您的代码不起作用的原因。
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:
要修复您的代码，请改用 jQuery 的便捷方法height()来获取和设置元素的高度作为数值。设置它时，只需将您的号码作为参数传递：
detailHeight = $('#detail').height();
columnHeight = detailHeight + 10;
$('.columns').height(columnHeight);
回答by griegs
Have you tried .height()or even .attr("height")?
您是否尝试过.height()，甚至.attr("height")？
回答by Reigel
$(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');
});
回答by T.P.
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.
正如每个人在最后一条语句中都提到了缺少的“+”符号，但是当我在变量 columnHeight 上运行 alert() 时（使用我的示例）它显示 20px10。我将 detailHeight 包裹在 parseInt() 中并且它起作用了。
HTML Snippet
HTML 片段
<div id="detail" style="background:#aaa;">HELLO</div>
<div id="x" class="columns" style="background:#f00;">HELLO</div>
JS Snippet
JS代码段
$(document).ready(function() {
detailHeight = $('#detail').css('height');
columnHeight = parseInt(detailHeight) + 10;
$('.columns').css('height', columnHeight+'px');
});
