Javascript IE9：为什么设置“-ms-transform”适用于 css，但不适用于 jquery.css()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5594117/
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
IE9: Why setting "-ms-transform" works from css, but not with jquery.css()
提问by grizwako
This works
这有效
div{
-ms-transform: rotate(30deg);
}
And following does not
而以下不
$("div").css("-ms-transform","rotate(30deg)");
Any ideas why, and how to fix it?
Same thing works good on all other browsers, but not on IE.
Ofcourse, only IE9 supports it. Older versions dont.
任何想法为什么，以及如何解决它？
同样的事情在所有其他浏览器上运行良好，但不适用于 IE。当然，只有IE9支持。旧版本没有。
回答by KooiInc
The dash ('-') in the property is invalid for use in scripting. You should use msTransforminstead.
属性中的破折号 ('-') 在脚本中无效。你应该msTransform改用。
By the way: though a number of browsers dounderstand and parse css like style['background-color'] from scripting, afaik Firefox doesn't. Furthermore I think JQuery .css(...)transforms properties like 'background-color'to their DOM-scripting equivalent ('backgroundColor'in this case) before parsing it.
顺便说一句：尽管许多浏览器确实从脚本中理解和解析了 style['background-color'] 之类的 css，但 afaik Firefox 却没有。此外，我认为 JQuery在解析之前.css(...)将属性转换'background-color'为它们的 DOM 脚本等效（'backgroundColor'在这种情况下）。
To be complete: JQuery.cssindeed transforms dashed properties to camelCase. Here's a representation of the JQuery.css-internals with the string '-ms-transform':
要完整：JQuery.css确实将虚线属性转换为camelCase。这是JQuery.css带有字符串的-internals 的表示'-ms-transform'：
var fcamelCase = function( all, letter ) {
return letter.toUpperCase();
};
var rdashAlpha = /-([a-z])/ig;
// JQuery.css does a replace operation with these variables
// on the raw property string:
alert('-ms-transform'.replace(rdashAlpha,fcamelCase)); //=> msTransform
So that's why $("div").css("-ms-transform","rotate(30deg)")doesn't work in IE9. IE9 expects: msTransform.
所以这就是为什么$("div").css("-ms-transform","rotate(30deg)")在 IE9 中不起作用。IE9 期望：msTransform.
Why then, does $("div").css("-moz-transform", "rotate(-90deg)")work in Firefox? Because Mozilla evidently decided to use complete CamelCase for their -moz-[properties], so the MozTransformscripting style property is valid (and, by the way, mozTransformisn't ... really).
那么，为什么$("div").css("-moz-transform", "rotate(-90deg)")在 Firefox中工作？因为 Mozilla 显然决定为他们的 -moz-[properties] 使用完整的 CamelCase，所以MozTransform脚本样式属性是有效的（顺便说一下，mozTransform不是......真的）。
It's all to the browser then, nothing new under the digital sun.
这一切都取决于浏览器，在数字阳光下没有什么新鲜事。
回答by BoltClock
Not sure whyAs KooiInc says, dashes in styleproperty names are invalid in DOM scripting.
不知道为什么正如KooiInc 所说，style属性名称中的破折号在 DOM 脚本中无效。
You can fix it by using object notation and passing in the name in camel case instead of hyphenated, like this:
您可以通过使用对象表示法并在驼峰式大小写而不是连字符中传递名称来修复它，如下所示：
$('div').css({ msTransform: 'rotate(30deg)' });
回答by samy-delux
jQuery 1.8brings automatic vendor prefix support, so this now works for all browsers:
jQuery 1.8带来了自动供应商前缀支持，因此现在适用于所有浏览器：
$("div").css("transform","rotate(30deg)");
