使用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中更改元素的類別

回答

相關問題