Javascript Girl
  1. Javascript Girl
  3. IE9: Pourquoi le réglage "-ms-transform" fonctionne à partir de css, mais pas avec jquery.css ()
Intereting Posts
Annuler une requête de chargement d'un fichier multiple AJAX Désactivez la mise en surbrillance du texte en double clic dans jQuery Comment détruire correctement l'instance CKEditor? Détecter la couleur "moyenne globale" de l'image Comment puis-je sérialiser un texte DOM vers XML, en utilisant JavaScript, de manière croisée? JavaScript: inverser la couleur sur tous les éléments d'une page Typeahead.js avec des liens cliquables Recursion vers le bas de l'arbre DOM Masquer ou modifier l'étiquette de valeur pour une entrée de gamme dans IE10 Puis-je détecter si la barre d'outils des marqueurs d'un navigateur est activée avec JavaScript? Comment faire une expression régulière ne correspondent qu'aux lettres bulgares cyrilliques Chemins relatifs avec les modules / paquets RequireJS JQuery surveille les changements de DomElement? Quelqu'un peut-il m'expliquer comment fonctionne cette fonction? Map / Reduce me donne NaN ou mauvais résultat (en raison de null)

IE9: Pourquoi le réglage "-ms-transform" fonctionne à partir de css, mais pas avec jquery.css ()

Cela marche 

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

Et ce qui suit n'est pas 

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

Des idées, pourquoi et comment le réparer?
La même chose fonctionne bien sur tous les autres navigateurs, mais pas sur IE. Bien sûr, seul IE9 le prend en charge. Anciennes versions, pas.

Le tableau de bord ('-') dans la propriété n'est pas valide pour être utilisé dans les scripts. Vous devez utiliser msTransform place.

Au fait: bien qu'un certain nombre de navigateurs comprennent et analysent css comme le style ['background-color'] à partir de scripts, afaik Firefox ne le fait pas. En outre, je pense que JQuery .css(...) transforme des propriétés comme 'background-color' en leur équivalent de scripts DOM ( 'backgroundColor' dans ce cas) avant de l'analyser.

Pour être complet: JQuery.css effet transforme les propriétés pointillées en camelCase . Voici une représentation des JQuery.css avec la chaîne '-ms-transform' : 

 var fcamelCase = function( all, letter ) { return letter.toUpperCase(); }; var rdashAlpha = /-([az])/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 s'attend à: msTransform .

Pourquoi donc, $("div").css("-moz-transform", "rotate(-90deg)") fonctionne-t-il dans Firefox? Parce que Mozilla a manifestement décidé d'utiliser CamelCase complet pour leur -moz- [properties], la propriété de style de script MozTransform est valide (et, en passant, mozTransform n'est pas … vraiment).

C'est tout sur le navigateur alors, rien de nouveau sous le soleil numérique.

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

Vous pouvez le réparer en utilisant la notation d'objet et en passant dans le nom dans un boîtier de chameau au lieu d'un trait d'union, comme ceci: 

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

JsFiddle preview

JQuery 1.8 apporte un support de préfixe de fournisseur automatique, donc cela fonctionne maintenant pour tous les navigateurs: 

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