Why can't I set -ms-transform with jQuery?_问答_开发者

Why can't I set -ms-transform with jQuery?

开发者 https://www.devze.com 2023-03-15 04:47 出处：网络

相关专题：css jquery

This is the code for my entire page. The div is rotated in Firefox (as expected), but not in I开发者_高级运维E9. Setting the -ms-transform property using normal CSS makes the div rotate, so the problem seems to stem from the attempt to set the property using jQuery. Does anyone know what's going on?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/jquery-latest.pack.js"></script>
<script>    
    $(function(){
        $("#divid").css("-ms-transform", "rotate(-90deg)");   // For IE9
        $("#divid").css("-moz-transform", "rotate(-90deg)");  // For Firefox
    });
</script>
</head>
<body>
    <div id="divid">Foo</div>
</body>
</html>

It might be easier to use a CSS Class for this:

.rotated {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

------

jQuery(function ($) {
    $('#divid').addClass('rotated');
});

Actually, you can! :-)

$('#divid').css({ msTransform: 'rotate(-90deg)' }); // for IE9

Very relevant IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

This might be relevant: http://bugs.jquery.com/ticket/8346

The one reporting it got around with using jQuery.cssHooks:

jQuery.cssHooks["MsTransform"] = {
    set: function( elem, value ) {
        elem.style.msTransform = value;
    }
};

$("#divid").css("MsTransform", "rotate(-90deg)");