jQuery.css() - marginLeft 与 margin-left？
使用 jQuery.css() 我被告知可以使用以下两个函数来获得相同的结果：
$(".element").css("marginLeft") = "200px";
$(".element").css("margin-left") = "200px";
我一直使用 marginLeft 因为这是文档中使用的：
速记 CSS 属性（例如边距、背景、边框）不是 支持。例如，如果您想检索渲染的边距， 使用： $(elem).css('marginTop') 和 $(elem).css('marginRight') 等 上。
为什么 jQuery 允许使用 marginLeft 以及 margin-left？看起来毫无意义并且使用更多资源来转换为CSS margin-left？
With jQuery.css() I've been told I can use the following two functions for the same results:
$(".element").css("marginLeft") = "200px";
$(".element").css("margin-left") = "200px";
I've always used marginLeft as this is what is used in the documentation:
Shorthand CSS properties (e.g. margin, background, border) are not
supported. For example, if you want to retrieve the rendered margin,
use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so
on.
Why has jQuery allowed for marginLeft as well as margin-left? It seems pointless and uses more resources to be converted to the CSS margin-left?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
jQuery 的底层代码将这些字符串传递给 DOM，这允许您以非常相似的方式指定 CSS 属性名称或 DOM 属性名称：
相当于：
jQuery 并没有真正做任何特别的事情。它可能会更改或代理您传递给
.css()的某些字符串，但实际上 jQuery 团队没有投入任何工作来允许传递任一字符串。没有使用额外的资源，因为 DOM 完成了这项工作。jQuery's underlying code passes these strings to the DOM, which allows you to specify the CSS property name or the DOM property name in a very similar way:
is equivalent to:
jQuery's not really doing anything special. It may alter or proxy some strings that you pass to
.css(), but in reality there was no work put in from the jQuery team to allow either string to be passed. There's no extra resources used because the DOM does the work.我认为这样可以与通过使用对象在一个函数调用中设置多个 css 样式时使用的可用选项保持一致，例如...
正如您所看到的，该属性未指定为字符串。如果您仍然想使用破折号，或者对于没有破折号可能无法设置的属性，JQuery 还支持使用字符串，因此以下内容仍然有效...
如果这里没有引号，JavaScript 将无法正确解析，因为属性名称不能包含其中有破折号。
编辑：看来 JQuery 实际上并没有做出区分，而是只是传递为 DOM 指定的要关心的属性，很可能使用
style[propertyName];I think it is so it can keep consistency with the available options used when settings multiple css styles in one function call through the use of an object, for example...
as you can see the property are not specified as strings. JQuery also supports using string if you still wanted to use the dash, or for properties that perhaps cannot be set without the dash, so the following still works...
without the quotes here, the javascript would not parse correctly as property names cannot have a dash in them.
EDIT: It would appear that JQuery is not actually making the distinction itsleft, instead it is just passing the property specified for the DOM to care about, most likely with
style[propertyName];迟到了，但没有人指出带有破折号的 css 属性在 jquery 的对象声明中不起作用：
因此，如果您更喜欢在 jquery 代码中使用破折号样式属性，请不要忘记使用引号。
Late to answer, but no-one has specified that css property with dash won't work in object declaration in jquery:
So, do not forget to use quotes if you prefer to use dash style property in jquery code.
何时使用 marginLeft：
$("div").css({ marginLeft:'12px', backgroundPosition:'10px -10px', minHeight: '40px' });如您所见，带有连字符的属性将转换为驼峰格式。使用上面代码块中的
margin-left会使 JavaScript 变得疯狂，因为它将连字符视为减法运算。何时使用 margin-left：
$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");理论上，两个代码块都会做同样的事情。我们可以允许在第二个块上使用连字符，因为它是一个字符串值，而与第一个块相比，它在某种程度上是一个对象。
现在这应该有意义了。
when is marginLeft being used:
$("div").css({ marginLeft:'12px', backgroundPosition:'10px -10px', minHeight: '40px' });As you can see, attributes that has a hyphen on it are converted to camelcased format. Using the
margin-leftfrom the previous code block above would make JavaScript bonkers because it will treat the hyphen as an operation for subtraction.when is margin-left used:
$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");Theoretically, both code blocks will do the same thing. We can allow hyphens on the second block because it is a string value while compared to the first block, it is somewhat an object.
Now that should make sense.
jQuery 只是支持 CSS 的编写方式。
此外，它还确保无论浏览器如何返回值，它都会被理解
jQuery is simply supporting the way CSS is written.
Also, it ensures that no matter how a browser returns a value, it will be understood
嗨，我试过了，它有效。
Hi i tried this it is working.