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

【问题标题】：What is the difference between JQuery MarginRight and CSS margin-right used in Javascript?Javascript 中使用的 JQuery MarginRight 和 CSS margin-right 有什么区别？
【发布时间】：2014-07-18 09:39:55
【问题描述】：

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

使用 marginRight 我可以做这样的事情...

$("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 marginRight 转换为 CSS margin-right 不是需要更多的资源吗？

您如何决定何时适合使用？

【问题讨论】：

带有- 的CSS 属性在Javascript 中使用时写成驼峰式属性。所以两者本质上是相同的属性。
检查一个是否比另一个更快可能会很有趣。 jQuery 是否在幕后做一些事情（正则表达式？）可能会优化 camelCase 而不是连字符分隔的？或相反亦然？这是一个快速的jsperf 我把jsperf.com/camelcase-vs-hyphen 放在一起，它表明camelCase 比连字符快（至少在Chrome 中）
@JackPattishallJr.：与很多事情一样，这在实践中几乎没有任何意义……
@JackPattishallJr. ：我更新了您的jsperf 以添加下划线系统。在 Chrome 中似乎更快。 jsperf.com/camelcase-vs-hyphen/2。不过我没想到会有这样的结果。
@CBroe - 虽然这是真的，但它至少可以帮助开发人员证明他们在各种选择之间的实施决策是正确的。或者，在您与团队讨论性能选择技术的会议上分享一些东西......（这些总是很有趣......）

标签： javascript jquery css

【解决方案1】：

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

另外，jQuery 可以平等地解释 CSS 和 DOM 格式多字属性。比如jQuery理解并返回 .css( "background-color" ) 和 .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

【讨论】：

【解决方案2】：

有些人喜欢 CamelCase (marginRight)，有些人喜欢连字符系统 (margin-right)。

我认为一切都与您项目的命名约定有关。就是这样。

阅读此intersting post。

据我了解，连字符系统是 CSS 原生系统。但由于其他语言（如 javascript 或 php）不支持变量名称中的连字符，CamelCase 是使开发更简单的好选择。

真正回答你的问题：我认为这对 jQuery 来说没什么大不了的，但由于它可能应该修改 javascript 样式属性，我猜它最后最终使用了 CamelCase。但我认为它在转换之前不会检查名称中的连字符，它可能总是通过转换函数来执行此操作。所以我不认为一个人比另一个人快。

编辑：我所说的“项目的命名约定”的意思是，您在为给定语言选择一种解决方案时可能获得的时间可能会在转换为另一种语言的操作时丢失。我猜 CamelCase 解决了这个问题，如果它不是纯 CSS 中的原生系统。

【讨论】：