如何在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

「它不起作用」並不能幫助那些試圖回答你的問題的人。請描述當前正在發生的事情以及您希望發生的事情，以便我們瞭解您正在努力完成什麼以及可能出現什麼問題。閱讀[問]將在未來幫助你獲得更多/更好的質量答案。 –

您必須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 = \'旋轉（$ {x} deg）''' – 2017-04-02 10:54:42

謝謝@squint更新了我的答案 –

老兄，千謝謝 – alfjlsjfowrejow

如何在JavaScript中將變量值插入DOM樣式值

回答

相關問題