使用javascript在html中更改元素的类别

我正在尝试更改一组图像的类别，当我按下键盘上的按钮时（a）。我写了下面的代码：使用javascript在html中更改元素的类别

<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的所以不知道为什么，这是行不通的，甚至如果我使用JavaScript的正确内我的HTML，我试图实现甚至可能吗？在正确的方向的一个点将有所帮助:)

来源

2017-03-16 andy

是'＃images'实际上是一个'canvas'元素？因为这不是如何将图像加载到“画布”中。目前这些'img'标签没有'src'属性，所以不会加载图像。是否有动机插入'img'标签而不是已经在DOM中的原因？ – haxxxton

这是你想要做的吗？按“a”时切换盒子阴影？ http://codepen.io/anon/pen/qrVjMO –

在你的代码中，你不是替换元素类。你正在替换图像本身。如果你想改变CLAS使用：

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" />

来源

2017-03-16 23:57:58

使用javascript在html中更改元素的类别

回答

相关问题