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

Question

使用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？

Answer 1

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

element.style.marginLeft = "10px";

相当于:

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

为什么jQuery允许marginLeft以及margin-left？它似乎毫无意义,并使用更多的资源转换为CSS边距 - 左？

jQuery并没有真正做任何特别的事情.它可能会改变或代理你传递给它的一些字符串.css(),但实际上jQuery团队没有任何工作允许传递任何字符串.由于DOM完成了工作,因此没有使用额外的资源.

Answer 2

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

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

如您所见,该属性未指定为字符串.如果您仍想使用短划线,或者对于没有短划线可能无法设置的属性,JQuery还支持使用字符串,因此以下内容仍可正常工作...

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

如果没有这里的引号,javascript将无法正确解析,因为属性名称中不能包含破折号.

编辑:看起来JQuery实际上并没有区分它左边,而只是传递为DOM指定的属性来关心,很可能是 style[propertyName];

Answer 3

迟到回答,但没有人指定带有破折号的css属性在jquery中的对象声明中不起作用:

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

因此,如果您更喜欢在jquery代码中使用破折号样式属性,请不要忘记使用引号.

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

Answer 4

什么时候使用marginLeft：

$（“ div”）。css（{
    marginLeft：'12px'，
    backgroundPosition：'10px -10px'，
    minHeight：“ 40px”
}）;

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

什么时候使用左边空白：

$（“ div”）。css（“ margin-left”，“ 12px”）。css（“ background-position”，“ 10px -10px”）。css（“ min-height”，“ 40px”）;

从理论上讲，两个代码块都将执行相同的操作。我们可以在第二个块上使用连字符，因为它是一个字符串值，而与第一个块相比，它在某种程度上是一个对象。
现在那应该有意义。