IE9 : Pourquoi le paramètre "-ms-transform" fonctionne à partir de css, mais pas avec jquery.css()

Question

Cela fonctionne

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

Et le fait de suivre ne

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

Une idée de la raison et de la façon de la réparer ?
La même chose fonctionne bien sur tous les autres navigateurs, mais pas sur IE. Bien sûr, seul IE9 le supporte. Les versions antérieures ne le font pas.

Answer 1

Le tiret ('-') dans la propriété n'est pas valide pour une utilisation dans un script. Vous devez utiliser msTransform à la place.

À propos : bien que plusieurs navigateurs faire comprend et analyse les codes CSS comme style['background-color'] à partir de scripts, ce qui n'est pas le cas de Firefox. De plus, je pense que JQuery .css(...) transforme les propriétés comme 'background-color' à leur équivalent DOM-scripting ( 'backgroundColor' dans ce cas) avant de l'analyser.

Pour être complet : JQuery.css transforme en effet les propriétés en pointillés en camelCase . Voici une représentation de la JQuery.css -internes avec la chaîne '-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

C'est pourquoi $("div").css("-ms-transform","rotate(30deg)") ne fonctionne pas dans IE9. IE9 attend : msTransform .

Pourquoi alors, est-ce que $("div").css("-moz-transform", "rotate(-90deg)") fonctionne dans Firefox ? Parce que Mozilla a manifestement décidé d'utiliser la casse complète de CamelCase pour ses -moz-[propriétés], de sorte que l'élément MozTransform La propriété de style de script est valide (et, soit dit en passant, mozTransform n'est pas ... vraiment).

Tout est dans le navigateur alors, rien de nouveau sous le soleil numérique.

Answer 2

Je ne sais pas pourquoi. Comme KooiInc dit , tirets dans style Les noms de propriétés ne sont pas valides dans le DOM scripting.

Vous pouvez résoudre ce problème en utilisant la notation d'objet et en passant le nom en majuscules au lieu du trait d'union, comme ceci :

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

Aperçu de jsFiddle

Answer 3

jQuery 1.8 apporte la prise en charge automatique du préfixe du fournisseur, de sorte que cela fonctionne désormais pour tous les navigateurs :

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