Question

我想通过单击按钮移动img。我知道这个问题已经问了很多，但我无法使用它们。

此处提供了相关的HTML：

<button class="ggE" (click)="gegenEnemy(chosenHero, actualEnemy);moveFist(); ...
  <div class="col">
    <img id="img" class="fist" src="...">

这是函数（打字稿）：

moveFist(): void {
    document.getElementById('img').classList.add('fist');
  }

还有我的CSS，它使图片从左向右移动：

.fist {
  width: 70px;
  height: 70px;
  position: relative;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  0%   {left:50px; top:20px;}
  100% {left:450px; top:20px;}
}

那我为什么不能通过单击按钮将其连接？

Answer 1

首先验证您的 HTML 代码

<button class="ggE" onclick="moveFist();">button</button>
<div class="col">
  <img id="img" class="" src="https://via.placeholder.com/150">
<div>

编辑：

function moveFist(){
  
  document.getElementById("img").classList.remove("fist");
  
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  
  void img.offsetWidth;
  
  document.getElementById("img").classList.add("fist");
}

通过偏移宽度

设置 img 的宽度， img.offsetWidth;

你能这样吗？

function moveFist(){
  
  document.getElementById("img").classList.remove("fist");
  
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  
  void img.offsetWidth;
  
  document.getElementById("img").classList.add("fist");
}

img{
  width: 70px;
  height: 70px;
  position: relative;
  left:50px;
  animation-duration: 2s;
  top:20px;
}
.fist{
  position:relative;
  animation-name: example;
}

@keyframes example {
  0%   {left:50px; top:20px;}
  100% {left:450px; top:20px;}
}

<button class="ggE" onclick="moveFist()">button</button>
<div class="col">
  <img id="img" class="" src="https://via.placeholder.com/150">
<div>

Answer 2

现在它消失了，但是仅在第二次单击时有效...您知道为什么吗？

 moveFist(): void {
        document.getElementById('img').classList.toggle('fist');
        const bild = document.getElementById('img');
        if (bild.style.display !== 'none') {
          bild.style.display = 'none';
        } else {
          bild.style.display = 'block';
        }
      }

img{
  width: 70px;
  height: 70px;
  position: relative;
  left:50px;
  top:20px;
  display: none;
}

我想通过单击按钮来移动图像吗？

2 个答案: