6

Or more generally, is there a way to add arbitrary CSS to an HTML element in javascript without JQuery?

Right now this works in Chrome, Firefox and IE 9/10.

var css = getRotationCSS(angle);
var div = document.getElementById('mydiv');
//div.css = css; ???
div.innerHTML = '<div style="'+css+'">HELLO</div>';

I have to add a div inside the div to get to style=''

All the examples I've seen just have a hardcoded angle but I need it to work for any angle 0-360, should I make 360 classes, 1 for each degree, then set the class?

function getRotationCSS(deg)
{
    return "\
        -webkit-transform: rotate("+deg+"deg); \
        -moz-transform: rotate("+deg+"deg); \
        -ms-transform: rotate("+deg+"deg); \
        -o-transform: rotate("+deg+"deg); \
        transform: rotate("+deg+"deg); \
        -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \
    ";
}

Yes the IE 7/8 code is not correct, I need a function to convert the degrees to a matrix.

Also the IE 7/8 code doesn't rotate it at all when I emulate IE 7/8 in my IE 10. I googled the code and it's supposed to rotate it by 45:

<html>
    <body>
        <div style='border:1px solid green;margin:333px;padding:333px;'>
            <div style="
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\";
                filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand');
            ">
                HELLO
            </div>
        </div>
    </body>
</html>
4

2 回答 2

3

使用以下方法创建正确的旋转矩阵deg：

// First compute deg in radians
var rad = deg*Math.PI/180;

// Then when specifying the rotation matrices use:
'... M11=' + Math.cos(rad) + 
  ', M12=' + -Math.sin(rad) +
  ', M21=' + Math.sin(rad) +
  ', M22=' + Math.cos(rad) +  ' ...'

也ms-filter不要使用单引号，因为您在字符串中使用单引号'auto expand'将外部引号更改为双引号并正确转义它们：

-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...
于 2013-05-16T02:41:30.620 回答
0

此代码旋转 -45 度

在即 7-8 也是。

<div style="
    width: 200px;
    height: 14px;
    border: none;
    background-image: url(http://image.ohozaa.com/i/47d/vliemC.png);
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476); /* IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476)"; /* IE8 */
    transform: rotate(-45deg);
">
</div>
<style type="text/css">
</style>
于 2014-03-13T13:48:27.507 回答