6

または、より一般的には、JQuery を使用せずに JavaScript の HTML 要素に任意の CSS を追加する方法はありますか?

現在、これは Chrome、Firefox、IE 9/10 で動作します。

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

style='' にするには、div 内に div を追加する必要があります

私が見たすべての例には角度がハードコードされているだけですが、角度0〜360で機能する必要があります.360クラスを作成し、各度に1つずつクラスを設定する必要がありますか?

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'); \
    ";
}

はい、IE 7/8 コードは正しくありません。度数を行列に変換する関数が必要です。

また、IE 10 で IE 7/8 をエミュレートすると、IE 7/8 コードはまったく回転しません。コードをグーグル検索したところ、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 に答える