jsのstyleプロパティを使うときに値を変数にする

Question

前提・実現したいこと

ネイティブのjsで時計をつくろうとしています。そのときに針の部分をrotate()で動かしたいのですが、値に変数を入れられないようで困っています

該当のソースコード

<div class="number" id="centerpic">
  <div id="oclock" class="pic" ></div>
  <div id="minute" class="pic"></div>
  <div id="second" class="pic" ></div>
</div>

window.onload = function(){
var i = 90;
var minute = document.getElementById("minute");
minute.style.transform = "rotate(i+deg)";
}

試したこと

ネットで調べたのですがヒットできませんでした。。。

Answer 1

目的の文字列を作成して、その値をセットしましょう。

minute.style.transform = "rotate(" + i + "deg)";

Comments

[jouson-129]

style決めるとき用の変数の入れ方があると思っていたのですが、通常の組み込み方でよかったんですね、、、ありがとうございました！

Answer 2

以下のように修正してみるといかがでしょうか？

修正前

minute.style.transform = "rotate(i+deg)";

修正後

minute.style.transform = `rotate(${i}deg)`;