IE9: Почему настройка "-ms-transform" работает из css, но не с jquery.css()

Это работает

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

И ниже не

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

Любые идеи, почему и как их исправить?
То же самое хорошо работает во всех других браузерах, но не в IE. Конечно, поддерживает только IE9. Старые версии не.

Ответы

Ответ 1

Черта ('-') в свойстве недопустима для использования в скриптах. Вместо этого вы должны использовать msTransform.

Кстати, хотя некоторые браузеры понимают и анализируют css, как стиль ['background-color'] из сценариев, afaik Firefox этого не делает. Кроме того, я думаю, что 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- [свойств], поэтому свойство стиля скрипта MozTransform является допустимым (и, кстати, MozTransform не... действительно).

Все это в браузере, ничего нового под цифровым солнцем.

Ответ 2

Не знаю, почему Как KooiInc говорит, тире в style имена свойств недействительны в сценариях DOM.

Вы можете исправить это, используя нотацию объекта и передав имя в верблюжьем корпусе вместо дефиса, например:

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

jsFiddle preview

Ответ 3

jQuery 1.8 поддерживает автоматическую поддержку префикса поставщика, поэтому теперь это работает для всех браузеров:

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