在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>