在HTML和JS中改變可見性屬性的怪癖

Question

我有一個問題，如果我添加一個隱藏的屬性到HTML中的按鈕，我不能使其可見。

<button id="proceed_to_next_question" hidden> Next Question </button> 

不過，如果我刪除隱藏屬性，並添加以下到我的JS文件：

document.getElementById("proceed_to_next_question").style.visibility = "hidden"; 

下面的代碼工作不會有問題：

document.getElementById("proceed_to_next_question").style.visibility = "visible"; 

現在工作正常，但我想了解隱藏在HTML文件中的輸入問題。任何人都可以澄清爲什麼改變HTML而不是JS導致這個問題？

Answer 1

按the specification：

因爲這個特性是使用CSS通常實現，它也可以使用CSS來覆蓋它。例如，將「display：block」應用於所有元素的規則將取消隱藏屬性的效果。因此，作者在編寫樣式表時必須小心，以確保該屬性的樣式仍然符合預期。

您正在試圖改變visibility但它是你需要改變，如果你想實現這個使用CSS display。

document.getElementById('show').addEventListener('click', show); 
 
function show(event) { 
 
    document.getElementById('proceed_to_next_question').style.display = "inline"; 
 
}

<button id="show">Show other button</button> 
 
<button id="proceed_to_next_question" hidden> Next Question </button>

也就是說，取決於在默認情況下實現特定CSS的瀏覽器是不是一個奇妙的想法，所以你應該考慮擺弄屬性來代替。

document.getElementById('show').addEventListener('click', show); 
 
function show(event) { 
 
    document.getElementById('proceed_to_next_question').removeAttribute('hidden') 
 
}

<button id="show">Show other button</button> 
 
<button id="proceed_to_next_question" hidden> Next Question </button>