jQuery.css() - marginLeft vs. margin-left？

Posted 2023-03-06

【中文标题】jQuery.css() - marginLeft vs. margin-left？

【英文标题】：jQuery.css() - marginLeft vs. margin-left?

【发布时间】：2011-12-15 16:24:20

【问题描述】：

使用 jQuery.css() 我被告知可以使用以下两个函数来获得相同的结果：

$(".element").css("marginLeft") = "200px";

$(".element").css("margin-left") = "200px";

我一直使用marginLeft，因为这是文档中使用的：

http://api.jquery.com/css/

简写 CSS 属性（例如边距、背景、边框）不是 支持的。例如，如果要检索渲染的边距， 使用：$(elem).css('marginTop') 和 $(elem).css('marginRight')，等等 开。

为什么 jQuery 允许 marginLeft 和 margin-left？似乎没有意义，要使用更多资源来转换为 CSS margin-left？

【问题讨论】：

顺便说一句，.css 与类相比慢得要命。基本上.style 和.css 是魔鬼。

【参考方案1】：

回答晚了，但没有人指定带有破折号的 css 属性在 jquery 的对象声明中不起作用：

.css(margin-left:'200px');//won't work
.css(marginLeft:'200px');//works

所以，如果您喜欢在 jquery 代码中使用破折号样式属性，请不要忘记使用引号。

.css('margin-left':'200px');//works

【参考方案2】：

嗨，我试过了，它工作正常。

$("#change_align").css("margin-top":"-39px","margin-right":"0px","margin-bottom":"0px","margin-left":"719px");

【参考方案3】：

我认为它可以与通过使用对象在一个函数调用中设置多个 css 样式时使用的可用选项保持一致，例如...

$(".element").css(  marginLeft : "200px", marginRight : "200px"  );

如您所见，该属性未指定为字符串。如果您仍然想使用破折号，或者对于没有破折号可能无法设置的属性，JQuery 还支持使用字符串，因此以下仍然有效...

$(".element").css(  "margin-left" : "200px", "margin-right" : "200px"  );

如果没有引号，javascript 将无法正确解析，因为属性名称中不能包含破折号。

编辑：JQuery 似乎并没有真正区分其左侧，而是只是传递了为 DOM 指定的属性来关心，很可能是 style[propertyName];

【讨论】：

"引擎不需要转换字符串。"笑什么？我认为您需要了解属性的工作原理。

@Raynos，是的，但是在某些时候，必须解析其中的 1 个（或两者）来确定它实际想要做什么。现在，通过阅读另一个答案，我承认 JQuery 在调用 DOM style[] 属性时可以使用两者的字符串版本，所以在这种情况下没有区别，因为 DOM 仍然可以使用字符串（或者 JQuery 以不同的方式传递它们 - 我找不到任何资源来证明任何一种方式）

不，这不是对象上的属性的工作方式，它们都是字符串。 marginLeft: "200px" 只是 "marginLeft": "200px" 的糖。解析是在加载文件时完成的，而不是在运行时完成的。可以说它的速度有点慢（几纳秒？），但这是一个史诗般的微优化。

@musefan 您是否考虑过您的代码比 Andy E 的代码慢 95%？ Proven fact.

@Raynos：好的，现在我们到了某个地方。我没有意识到解析是在运行时完成的。感谢您的信息；）

【参考方案4】：

jQuery 的底层代码将这些字符串传递给 DOM，它允许您以非常相似的方式指定 CSS 属性名称或 DOM 属性名称：

element.style.marginLeft = "10px";

相当于：

element.style["margin-left"] = "10px";

为什么 jQuery 允许 marginLeft 和 margin-left？好像没有意义，用更多的资源来转换成CSS margin-left？

jQuery 并没有真正做任何特别的事情。它可能会更改或代理您传递给.css() 的一些字符串，但实际上，jQuery 团队没有没有工作 允许传递任何一个字符串。没有使用额外的资源，因为 DOM 完成了这项工作。

【参考方案5】：

何时使用 ma​​rginLeft：

$("div").css( marginLeft:'12px', 背景位置：'10px -10px', 最小高度：'40px' );

如您所见，带有连字符的属性将转换为驼峰格式。使用上述代码块中的 margin-left 会使 JavaScript 变得疯狂，因为它将连字符视为减法运算。

什么时候使用ma​​rgin-left：

$("div").css("margin-left","12px").css("background-position","10px -10px").css("min-height","40px");

理论上，两个代码块都会做同样的事情。我们可以允许在第二个块上使用连字符，因为它是一个字符串值，而与第一个块相比，它在某种程度上是一个对象。 现在这应该是有道理的。

【参考方案6】：

jQuery 只是支持 CSS 的编写方式。

而且，它确保无论浏览器如何返回一个值，它都会被理解

jQuery 可以同等地解释 CSS 和 DOM 格式 多字属性。比如jQuery理解并返回 .css('background-color') 和 .css('backgroundColor').

【讨论】：

jQuery 的功劳在于它在这里没有做的事情，底层 DOM 处理两个不同的字符串。