Question

我有以下代码：当幻灯片值更改时，元素的transform属性应该取幻灯片值，默认情况下为0deg，我希望它逐渐改变幻灯片值，但我不知道为什么，但它没有按预期工作。

<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

Answer 1

您必须将值x应用于transform属性，如下所示：

Digital Signature:None

<强>更新

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

也可以使用template literals.

如何在JavaScript中将变量值插入DOM样式值

1 个答案: