javascript - Javascript 中使用的 JQuery MarginRight 和 CSS margin-right 有什么区别？

Question

JQuery marginRight 和在 Javascript 中使用 CSS margin-right 属性有什么区别？

有了 ma​​rginRight 我可以做这样的事情...

$("button").click(function () {
      var div = $("div");
      div.animate({ marginRight: '4em', opacity: '0.4' }, "slow");
});

我可以用其中任何一种进行一些操作......

$(".element").css("marginRight") = "4em";

$(".element").css("margin-right") = "4em";

为什么 jQuery 允许像 marginRight 和 margin-right 这样的样式操作？从jQuery ma​​rginRight 转换到CSS margin-right 不是使用更多资源吗？

你如何决定什么时候使用合适？

Answer 1

两者是一样的，jQuery 理解这两种格式。 From the docs:

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css(
"backgroundColor" ).

这两种访问这些 css 属性的语法在 jQuery 之外已经存在。例如:

在 CSS 中:

#elm {margin-right: value;}

在原生 JS 中:

document.getElementById('elm').style.marginRight = value;

需要同时支持这两种语法才能使两个阵营都满意并维持现有范例。

至于速度，我建议 [虽然我没有做过测试] 驼峰式版本会更快，因为这就是他们在内部设置/获取这些值的方式。

@jack-pattishall-jr 制作了一个 jsperf -> http://jsperf.com/camelcase-vs-hyphen