javascript - 使用javascript更改html中元素的类

Question

我目前正尝试在按下键盘上的按钮 (a) 时更改一组图像的类别。我写了下面的代码:

    <div id="images" class="img"/>
 <img src="spiderman.png" alt=""/>
 <img src="superman.png" alt="" height="25%" width="25%"/>
 <img src="batman.png" alt="" />
</div>

<Script type="text/javascript">
    function keyDown(event) {
      if (event.keyCode == 65) {
        var canvas = document.getElementById('images');
        canvas.innerHTML = '<img class="img2" />'
      }
    }
    function keyUp(event) {
  if (event.keyCode == 65) {
    var canvas = document.getElementById('images');
    canvas.innerHTML = '<img class="img" />';
  }
}
</script>

CSS

  .img {
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.img2 {
box-shadow: 0px 0px 5px #fff;
  position: absolute;  
  right: 15%; 
  top: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

我对 html 和 JavaScript 都很陌生，所以不知道为什么这不起作用，或者即使我在我的 html 中正确使用了 JavaScript，我想要实现的目标是否可能？指向正确方向的观点会有所帮助:)

Answer 1

在您的代码中，您没有替换元素类。您正在替换图像本身。如果你想改变类使用这个:

document.getElementById("MyElement").className = "MyOtherClass"

所以它会是这样的:

 (function() {

   function keyDown(event) {
     if (event.keyCode == 65) {
       if (document.getElementsByClassName("img").length > 0) {
         document.getElementsByClassName("img")[0].className = "img2"
       } else {
         document.getElementsByClassName("img2")[0].className = "img"
       }
     }
   }

   document.addEventListener('keydown', keyDown);
 })();

.img {
  width: 100px
}

.img2 {
  width: 400px
}

<img class="img" src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" />