IE9:为什么设置“-ms-transform”;工作于css，但不能与jquery.css()

IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

本文关键字：css 但不能 jquery 工作 设置 为什么 -ms-transform IE9      更新时间：2023-09-26

可以了

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


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

有什么好主意吗?
同样的事情适用于所有其他浏览器，但不适用IE。当然，只有IE9支持它。

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

顺便说一下:虽然许多浏览器都能从脚本中理解和解析style['background-color']这样的css，但火狐却不能。此外，我认为JQuery .css(...)在解析之前将'background-color'等属性转换为dom脚本等效(在本例中为'backgroundColor')。

要完成:JQuery.css确实将虚线属性转换为camelCase。下面是字符串'-ms-transform':

的JQuery.css内部组件的表示
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-[属性]使用完整的CamelCase，所以MozTransform脚本样式属性是有效的(顺便说一下，mozTransform不是……真的).

这都是浏览器的事了，在数字时代没什么新鲜的。

不知道为什么正如KooiInc所说，style属性名中的破破号在DOM脚本中无效。

您可以通过使用对象表示法并以驼峰形式传递名称而不是用连字符来解决这个问题，如下所示:

$('div').css({ msTransform: 'rotate(30deg)' });

jsFiddle预览

jQuery 1.8带来了自动供应商前缀支持，所以现在可以在所有浏览器上工作:

$("div").css("transform","rotate(30deg)");
相关文章：