如何把我的元素回用後顯示：無

Question

在點擊我可以隱藏我的div元素display:none但按鈕被點擊

document.getElementById("red").onclick = function(){ 
    document.getElementById("red").style.display = "none"; 
} 
document.getElementById("back").onclick = function() { 
    document.getElementsById("red").style.display = "inline"; 
} 

Answer 1

你好你的腳本錯字錯誤時不能display:inline拿回來。 getElementsById具有元素而不是元素。 一直使用控制檯的錯誤消息，它會幫助你很多:)。 乾杯！ 你的腳本應該看起來像這樣。

document.getElementById("red").onclick = function(){ 
    document.getElementById("red").style.display = "none"; 
     } 
document.getElementById("back").onclick = function() { 
    document.getElementById("red").style.display = "inline"; 
} 

Answer 2

實施例：display:none到display:inline切換。

document.getElementById("red").onclick = function(){ 
 
    document.getElementById("red").style.display = "none"; 
 
} 
 
document.getElementById("back").onclick = function() { 
 
    document.getElementById("red").style.display = "inline"; 
 
}

#red 
 
{ 
 
color:#fff; 
 
background:red; 
 
padding:8px 20px; 
 
}

<div id="red">RED (Click me)</div> 
 

 
<button id="back">Back</button>

你總是可以在控制檯中看到的錯誤，並找出解決方案。

Answer 3

我建議你使用一個類來創建樣式，並且還可以使用Element.addEventListener（）作爲事件。

var red = document.getElementById('red') 
var back = document.getElementById('back') 
red.addEventListener('click', function() { 
    this.classList.add('hidden') 
}) 
back.addEventListener('click', function() { 
    red.classList.remove('hidden') 
}) 

https://jsfiddle.net/cnzabf1a/

文檔上

：

• addEventListener
• classList