javascriptのarraylistでCSS値を変更する

Question

JavaScriptのCSSスタイルをiのように変更したいのですが、transform: rotateZ(120deg);

<script> 
    var Rotate = ['90deg','120deg','150deg','180deg','210deg','240deg','90deg','120deg','150deg','180deg','210deg','240deg']; 
    function Time() { 
     var marg, d, hour; 
     marg = document.getElementById("hand"); 
     d = new Date(); 
     hour = d.getHours(); 
     for(i = 0; i < 12; i++) { 
      if(hour == i) { 
       var x=Rotate[i]; 
       alert(x); 
       marg.style.transform= "rotateZ(x)"; 
      } 
     } 
    } 
</script> 

alert(x)取り組んでいるが、transformが動作していません。配列リストを使用してtransformの値を変更する方法はありますか？

Answer 1

"rotateZ（x）"を使用しています。ここではxは文字列のように書くため、このスクリプトの変数ではありません。変数は"以外に書き込まなければなりません。

は、あなたのコード内でこの

var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg']; 

function Time() { 
    var marg, d, hour; 
    marg = document.getElementById("hand"); 
    d = new Date(); 
    hour = d.getHours(); 
    for (i = 0; i < 12; i++) { 
     if (hour == i) { 
     var x = Rotate[i]; 
     alert(x); 
     marg.style.transform = "rotateZ("+x+")"; 
     } 
    } 

Answer 2

"rotateZ(x)"のようにそれを使用して、完全な文字列です。コードを動作させるには、それを"rotateZ(" + x + ")"に変更する必要があります。

Array#forEachを使用すると、タスクを簡素化できます。

var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg']; 

function Time() { 
    var marg, d, hour; 

    marg = document.getElementById("hand"); 
    d = new Date(); 
    hour = d.getHours(); 

    Rotate.forEach(function(v, i) { 
     if (hour == i) { 
      alert(v); 
      marg.style.transform = "rotateZ("+ v + ")"; 
     } 
    }); 
} 

Answer 3

は、私はあなたの質問を超えているけど、私はこの問題を解決するための最善の解決策は、別のCSSクラスを使用してのみ、JSでクラス名を変更していると思います。

JSでのCSSプロパティをいじることは私には本当に不必要なようです:(