Question

这有效

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

以下不是

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

任何想法，以及如何解决它？同样的事情在所有其他浏览器上运行良好，但在IE上则不行。当然，只有IE9支持它。旧版本不。

Answer 1

属性中的短划线（' - '）无法用于脚本编写。您应该使用msTransform代替。

顺便说一下：虽然许多浏览器从脚本中理解和解析css，如样式['background-color']，但事实并非如此。此外，我认为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显然决定使用完整的CamelCase作为他们的-moz- [properties]，所以MozTransform脚本样式属性是有效的（顺便说一下，mozTransform不是......真的）。

这对浏览器来说都是如此，在数字太阳下没什么新鲜事。

Answer 2

~~不确定为什么~~为KooiInc says，style属性名称中的短划线在DOM脚本中无效。

您可以使用对象表示法修复它，并以驼峰形式传递名称而不是连字符，如下所示：

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

jsFiddle preview

Answer 3

jQuery 1.8带来自动供应商前缀支持，因此现在适用于所有浏览器：

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

IE9：为什么设置“-ms-transform”可以从css开始，但不能用于jquery.css（）

3 个答案: