为什么jquery / css需要top属性的'px',而不是width或height属性?

时间:2012-12-07 09:47:22

标签: jquery css

我有以下javascript / jquery代码:

 var some_div = $('<div>', {});

 some_div.
    css('position', 'absolute').
    css('width' , '100').
    css('height', '100').
    css('top'   , '100px').
    css('background-color', '#ddf');

 some_div.appendTo('body');

按预期工作,因为它将some_div距离正文顶部100个像素,并将其宽度和高度设置为100像素。

如果我将top属性的行更改为css('top' , '100').,即如果省略px,则该框忽略指定的属性。显然,顶级属性需要px才能生效。

我想知道为什么我不必为框的宽度和高度指定px

1 个答案:

答案 0 :(得分:6)

仔细阅读了源代码后,它看起来像是一个jQuery怪癖,而不是浏览器或CSS奇怪。 jQuery的css函数对this function中提供的值进行大部分预处理。

该函数以各种方式处理某些CSS奇怪和输入奇数。一种方法是通过添加“px”将数字转换为字符串。这从不适用于您的情况,因为您提供字符串。

jQuery还有一组钩子,在将它们设置在DOM节点上之前调用CSS值。您的宽度和高度值正在增加here以考虑IE5.5's box model,px由setPositiveNumber()添加。

结论: 从顶部,底部,左侧,右侧,宽度和高度样式中省略'px'是无效的CSS。由于jQuery正在修改您的属性以支持过时的浏览器和数值,因此您可以通过省略“px”来消除宽度和高度属性中的无效CSS!

以下内容可行:

css('top' , 100)