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>

Quirk在HTML vs JS中改变了可见性属性

1 个答案: