JavaScriptのDOMスタイル値に変数値を挿入するにはどうすればいいですか？

次のコードがあります：スライド値が変更されると、要素のtransformプロパティはデフォルトで0degで、なぜかわからないけど、それはうまくいかない。JavaScriptのDOMスタイル値に変数値を挿入するにはどうすればいいですか？

<pre> 
<body> 
<div id="trsScript"> 
</div> 
<input type="range" min="0" max="360" id="mxConcept" oninput="shthis()"    
onchange="shthis()"></BR> 
<p id="callme"></p> 
<style> 
#trsScript{ 
    width: 200px; 
    height: 100px; 
    background-color: greenyellow; 
    transform: rotate(0deg); 
} 

</style> 

<script> 
function shthis(){ 
    var x = document.getElementById('mxConcept').value; 
     document.getElementById('callme').innerHTML=x; 
     document.getElementById("trsScript").style.webkitTransform =   
"rotate(100deg)"; 
} 


</script> 
</body> 
</pre>

Codepen

出典

2017-04-02 alfjlsjfowrejow

「うまくいかない」とは、あなたの質問に多くの回答をしている人を助けません。代わりに、現在何が起こっているのか、何が起こると予想されるのかを記述して、達成しようとしていることと間違っていることを理解することができます。 [尋ねる]を読むことで、将来的により良い/より質の高い回答が得られます。 –

あなたはこのようなtransformプロパティに値x適用する必要があります。

function shthis(){ 
     var x = document.getElementById('mxConcept').value; 
      document.getElementById('callme').innerHTML=x; 
      document.getElementById("trsScript").style.webkitTransform = "rotate("+x+"deg)"; 
    }

を更新：

document.getElementById("trsScript").style.webkitTransform = `rotate(${x}deg)`

もtemplate literals.

を使用して動作します

出典

2017-04-02 10:44:35

テンプレートリテラルではこれは必須ではありません。 '.webkitTransform = \' rotate（$ {x} deg）\ ';' –

ありがとう@squintは私の答えを更新しました –

おい、1000ありがとう – alfjlsjfowrejow

JavaScriptのDOMスタイル値に変数値を挿入するにはどうすればいいですか？

答えて

関連する問題