在 HTML 与 JS 中更改可见性属性的怪癖答案

【问题标题】：Quirk with changing visibility property in HTML vs JS在 HTML 与 JS 中更改可见性属性的怪癖
【发布时间】：2015-01-02 05:26:54
【问题描述】：

我有一个问题，如果我将隐藏属性添加到 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 会导致这个问题？

【问题讨论】：

标签： javascript html visibility

【解决方案1】：

根据the specification：

因为此属性通常使用 CSS 实现，所以也可以使用 CSS 覆盖它。例如，将“显示：块”应用于所有元素的规则将取消隐藏属性的效果。因此，作者在编写样式表时必须小心，以确保属性仍按预期设置样式。

您正在尝试更改 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>

【讨论】：