Jquery CSS分配负值答案

【问题标题】：Jquery CSS assigning negative valuesJquery CSS分配负值
【发布时间】：2012-09-27 22:56:54
【问题描述】：

这是我的 jQuery 代码：

<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
 $(document).ready(function() {
     get_font_size();
     set_sidebar();

});
function get_font_size()
{
var b=$(window).width();
var side_size=b*260/1440;
b=b-side_size;
$("#sidebar").css({"width":side_size});
$("#alexa-widget img").css({"width":side_size});
$(".fb-like-box").attr("data-width",side_size); 
}
function set_sidebar()
{
var b=$(window).width();
var font_size=b*65/1440;
var font_size_2=b*133/1440;
var margin_top=b*10/1440;
margin_top*=-1;
margin_top=Math.round(margin_top);
$("#my_tabs li").css({"font-size":font_size});
$("#header").css({"font-size":font_size_2,"margin-top":margin_top});

}
</script>

除了 margin-top 属性外，一切正常。我无法将 margin-top 分配给负值。它失败但字体大小和其他属性工作正常。为什么 jquery css 设置会因负值而失败？如果我这样做相同的 CSS 内部它工作得非常完美。我需要这个来根据屏幕分辨率更改网页所以我不能在 CSS 中这样做。我需要 jQuery 修复这个。我的代码中已经有 viewport 元标记所以请不要建议视口或媒体查询解决方案。我已经用警报（margin_top）检查了margin_top变量，它根据需要向我显示了一个正确的负值，因此只有css设置部分失败才能正确进行计算。请帮我解决这个问题。谢谢。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

使用 jQuery 设置 margin-top 时，必须在末尾添加单位（在本例中为：px）

例子：

>>> $("body").css("margin-top");
"0px"
>>> $("body").css("margin-top", "10");
[body]
>>> $("body").css("margin-top");
"0px"
>>> $("body").css("margin-top", "10px");
[body]
>>> $("body").css("margin-top");
"10px"

编辑（更清楚地说明如何修复您的代码：

将代码中的行更改为：

$("#header").css({"font-size":font_size_2,"margin-top":margin_top});

到

$("#header").css({"font-size":font_size_2,"margin-top":margin_top + "px"});

【讨论】：

我需要动态地做。值会根据屏幕分辨率而变化。让我试试吧。
怎么错了？我用负数尝试了我的确切代码，它可以工作。他不能将边距设置为负数的唯一原因是他忘记了单位。
因为当它们不是字符串时将值作为字符串提供是不好的做法。
这个答案不应该被接受，因为它不是真的。是的，供应单位有效，但不是必需的
@user1613360 在 jsfiddle.net 中放了一个复制原始问题的演示

【解决方案2】：

这样做有什么问题like this？

$('div').css({marginTop:-100});

并非所有内容都必须是stringly typed。

【讨论】：

【解决方案3】：

您需要为边距添加计量单位。

$("#header").css({"font-size":font_size_2,"margin-top":margin_top+"%"});

【讨论】：

不正确，如果使用数字，jQuery会自动设置“px”
@charlietfl：我不这么认为。如果是真的那么它应该对我有用，但它失败了。

【解决方案4】：

我使用$("#header").css({"font-size":font_size_2,"margin-top":margin_top+"%"}); 修复了它。

【讨论】：