javascript - IE9 : Why setting "-ms-transform" works from css, 但不是 jquery.css()

Question

这行得通

div{
    -ms-transform: rotate(30deg);
}

下面没有

$("div").css("-ms-transform","rotate(30deg)");

任何想法，为什么，以及如何解决它？
同样的事情适用于所有其他浏览器，但不适用于 IE。当然，只有IE9支持。旧版本没有。

Answer 1

属性中的破折号(“-”)在脚本中使用无效。您应该改用 msTransform。

顺便说一句:尽管许多浏览器确实理解和解析来自脚本的 style['background-color'] 之类的 css，但 afaik Firefox 却没有。此外，我认为 JQuery .css(...) 将 'background-color' 之类的属性转换为其等效的 DOM 脚本('backgroundColor'在这种情况下)在解析它之前。

要完整:JQuery.css 确实将虚线属性转换为 camelCase .下面是 JQuery.css 内部结构的表示，带有字符串 '-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

这就是为什么 $("div").css("-ms-transform","rotate(30deg)") 在 IE9 中不起作用的原因。 IE9 需要:msTransform。

为什么 $("div").css("-moz-transform", "rotate(-90deg)") 在 Firefox 中工作？因为 Mozilla 显然决定对其 -moz-[properties] 使用完整的 CamelCase，所以 MozTransform 脚本样式属性是有效的(顺便说一下，mozTransform 不是...真的)。

这一切都取决于浏览器，在数字太阳下没有什么新鲜事。