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

Question

Это работает

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

А следующее не

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

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

Answer 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- [properties], поэтому свойство стиля сценариев MozTransform является действительным (и, кстати, mozTransform не ... действительно).

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

Answer 2

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

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

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

jsFiddle preview

Answer 3

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

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