gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 20:30:34 25 4
gpt4 key购买 nike

我有以下代码:当幻灯片值更改时,元素的转换属性应采用默认为 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

最佳答案

您必须像这样将值 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.

关于javascript - 如何在 JavaScript 中将变量值插入 DOM 样式值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43167352/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com