IE9: Por qué configurar"-ms-transform " funciona desde css, pero no con jquery.css()

Question

IE9: Por qué configurar"-ms-transform " funciona desde css, pero no con jquery.css()

Esto funciona

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

Y siguientes no

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

¿Alguna idea de por qué y cómo arreglarlo?
Lo mismo funciona bien en todos los demás navegadores, pero no en IE. Por supuesto, solo IE9 lo soporta. Versiones anteriores dont.

28

css javascript jquery css3 internet-explorer-9

Author: BoltClock, 2011-04-08

Source

3 answers

~~No estoy seguro de por qué~~ Como KooiInc dice, los guiones en style los nombres de propiedad no son válidos en el scripting DOM.

Puede arreglarlo usando la notación de objetos y pasando el nombre en camel case en lugar de con guiones, de esta manera:

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

JsFiddle preview

20

Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:31:55

JQuery 1.8 ofrece soporte automático de prefijos de proveedor, por lo que ahora funciona para todos los navegadores:

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

10

Author: samy-delux,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-29 18:41:08

score 60 · Accepted Answer

El guion ('-') de la propiedad no es válido para usar en scripting. Debe usar msTransform en su lugar.

Por cierto: aunque varios navegadores entienden y analizan css como style ['background-color'] de scripting, afaik Firefox no lo hace. Además, creo que jQuery .css(...) transforma propiedades como 'background-color' a su equivalente de DOM-scripting ('backgroundColor' en este caso) antes de analizarlo.

Para estar completo: JQuery.css de hecho transforma las propiedades discontinuas a camelCase . Aquí hay una representación de los JQuery.css-internos con la cadena '-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

Así que es por eso que $("div").css("-ms-transform","rotate(30deg)") no funciona en IE9. IE9 espera: msTransform.

¿Por qué entonces funciona $("div").css("-moz-transform", "rotate(-90deg)") en Firefox? Porque Mozilla evidentemente decidió usar camelCase completo para sus propiedades-moz - [], por lo que la propiedad de estilo de scripting MozTransform es válida (y, por cierto, mozTransform no lo es ... realmente).

Es todo para el navegador, entonces, nada nuevo bajo el sol digital.