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

BoltClockgrizwako提出了一个问题:IE9: Why setting “-ms-transform” works from css, but not with jquery.css(),或许与您遇到的问题类似。

回答者sandstromKooiInc给出了该问题的处理方式:

The dash ('-') in the property is invalid for use in scripting. You should use msTransform instead.

By the way: though a number of browsers do understand 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.

To be complete: JQuery.css indeed transforms dashed properties to camelCase. Here's a representation of the JQuery.css-internals with the string '-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.

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 MozTransform scripting style property is valid (and, by the way, mozTransform isn't ... really).

It's all to the browser then, nothing new under the digital sun.

希望本文对你有帮助,欢迎支持JavaScript中文网


公众号

欢迎 JavaScript 爱好者