使用 display:none 后如何恢復我的元素

Question

單擊時，我可以使用display:none隱藏我的 div 元素，但在單擊按鈕時無法使用display:inline將其取回

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

Answer 1

您好，您的腳本有拼寫錯誤。 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

我建議您使用 class 進行樣式設置，並對事件使用 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/

有關的文檔：

• 添加事件監聽器
• 類列表

Answer 4

如果您使用的是 flex，那么使用“inline-flex”可能會更好：

document.getElementById("red").style.display = "inline-flex";