jQuery.css() - marginLeft 与 margin-left？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7902324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery.css() - marginLeft vs. margin-left?
提问by Curt
With jQuery.css() I've been told I can use the following two functions for the same results:
使用 jQuery.css() 我被告知我可以使用以下两个函数来获得相同的结果：
$(".element").css("marginLeft") = "200px";
$(".element").css("margin-left") = "200px";
I've always used marginLeftas this is what is used in the documentation:
我一直使用，marginLeft因为这是文档中使用的内容：
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.
不支持速记 CSS 属性（例如边距、背景、边框）。例如，如果要检索渲染的边距，请使用：$(elem).css('marginTop') 和 $(elem).css('marginRight')，依此类推。
Why has jQuery allowed for marginLeftas well as margin-left? It seems pointless and uses more resources to be converted to the CSS margin-left?
为什么 jQuery 允许marginLeft以及margin-left？似乎毫无意义并且使用更多资源来转换为 CSS margin-left？
回答by Andy E
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:
jQuery 的底层代码将这些字符串传递给 DOM，这允许您以非常相似的方式指定 CSS 属性名称或 DOM 属性名称：
element.style.marginLeft = "10px";
is equivalent to:
相当于：
element.style["margin-left"] = "10px";
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?
为什么 jQuery 允许 marginLeft 和 margin-left？似乎毫无意义并且使用更多资源转换为CSS margin-left？
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 workput in from the jQuery team to allow either string to be passed. There's no extra resources used because the DOM does the work.
jQuery 并没有真正做任何特别的事情。它可能会更改或代理您传递给 的某些字符串.css()，但实际上jQuery 团队没有投入任何工作来允许传递任一字符串。没有使用额外的资源，因为 DOM 完成了这项工作。
回答by musefan
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...
我认为它可以与通过使用对象在一个函数调用中设置多个 css 样式时使用的可用选项保持一致，例如......
$(".element").css( { marginLeft : "200px", marginRight : "200px" } );
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...
如您所见，该属性未指定为字符串。如果您仍然想使用破折号，或者对于没有破折号可能无法设置的属性，JQuery 还支持使用字符串，因此以下仍然有效...
$(".element").css( { "margin-left" : "200px", "margin-right" : "200px" } );
without the quotes here, the javascript would not parse correctly as property names cannot have a dash in them.
如果没有这里的引号，javascript 将无法正确解析，因为属性名称中不能有破折号。
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];
编辑：看起来 JQuery 并没有真正区分 itsleft，而是只是传递为 DOM 指定的属性来关心，最有可能的是 style[propertyName];
回答by Bhojendra Rauniyar
Late to answer, but no-one has specified that css property with dash won't work in object declaration in jquery:
回答晚了，但没有人指定带有破折号的 css 属性在 jquery 的对象声明中不起作用：
.css({margin-left:'200px'});//won't work
.css({marginLeft:'200px'});//works
So, do not forget to use quotes if you prefer to use dash style property in jquery code.
因此，如果您更喜欢在 jquery 代码中使用破折号样式属性，请不要忘记使用引号。
.css({'margin-left':'200px'});//works
回答by Karvoin Gabiloux
when is marginLeftbeing used:
何时使用marginLeft：
$("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.
如您所见，带有连字符的属性将转换为驼峰格式。使用margin-left上一个代码块中的 会使 JavaScript 疯狂，因为它会将连字符视为减法运算。
when is margin-leftused:
什么时候使用margin-left：
$("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.
理论上，两个代码块都会做同样的事情。我们可以在第二个块上允许连字符，因为它是一个字符串值，而与第一个块相比，它有点像一个对象。
现在这应该是有道理的。
回答by Jason Gennaro
jQuery is simply supporting the way CSS is written.
jQuery 只是支持 CSS 的编写方式。
Also, it ensures that no matter how a browser returns a value, it will be understood
此外，它确保无论浏览器如何返回值，都会被理解
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').
jQuery 可以同等地解释多字属性的 CSS 和 DOM 格式。例如，jQuery 理解并返回 .css('background-color') 和 .css('backgroundColor') 的正确值。
回答by Luke
Hi i tried this it is working.
嗨，我试过这个它正在工作。
$("#change_align").css({"margin-top":"-39px","margin-right":"0px","margin-bottom":"0px","margin-left":"719px"});
