Question

当我单击一个复选框时，我有一个可旋转360度的svg图像。我使用style.transform。但是当我取消选中时，它不会再执行此操作。

有什么方法可以使它旋转不止一次而不刷新吗？

我尝试在“ else”中包含相同的功能

<input type="checkbox" id="myCheck"  onclick="myFunction()">
<label for="myCheck"><img src="logo.svg" id="svg1"></label>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }
}
</script>

目前，它只旋转一次。当我再次单击时，它不会再次执行该操作。

Answer 1

hmmm。为什么你的其他人也有360度？如果我说对了，你应该说

if(input.checked) document.getElementById("svg1").style.transform = "rotate(360deg)";
else document.getElementById("svg1").style.transform = "rotate(0)";

Answer 2

如果我错了，请纠正我。因此，您想将SVG元素旋转360度吗？因此，基本上，如果将元素旋转360度，您将看不到任何差异，因为它是完整的旋转。当然，变换并不能求和。

如果需要，您可以添加晶体管。

<input type="checkbox" id="myCheck"  onclick="myFunction()">
svg
<label for="myCheck"><img src="logo.svg" id="svg1"></label>


<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  document.getElementById("svg1").style.transition = "all 300ms ease-in"; 
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(0deg)";
  }
}
</script>

style.transform =“ rotate（）”不止一次？

2 个答案: