如何使用 JavaScript 取消隐藏隐藏的 html <p> 标签元素？答案

【问题标题】：How to unhide a hidden html <p> tag element using JavaScript?如何使用 JavaScript 取消隐藏隐藏的 html <p> 标签元素？
【发布时间】：2021-12-24 01:12:21
【问题描述】：

我的 HTML 文件的正文标记中有以下隐藏的 <p> 元素（用于我的 chrome 扩展名）。

<p hidden id="button">
    <a id="dashboard-btn" href="www.google.com" target="_blank" rel="noopener noreferrer">
      www.google.com
    </a>
</p>

我想使用 JavaScript 取消隐藏它。我的随机尝试未能取消隐藏它：

document.getElementById("button").style.visibility = 'visible';

[已解决]这（也）有效：

document.getElementById("button").style.display = "block";

【问题讨论】：

为什么不用display: none 隐藏并用display: block 取消隐藏？或使用element.removeAttribute(attrName)?
@tacoshy 为什么要移除属性而不是使用隐藏属性的属性？
@SimoneRossaini，如果我们将 display none 替换为 visibility hidden，那么我们可以做出漂亮的过渡。直接或通过设置器更改属性并没有太大区别。但我直接认为，就像你提到的那样是一种更干净的方式
在使用 html 的 20 多年中，我从未见过在野外使用的 hidden html 属性。我不知道它的存在。阅读MDN 让我考虑使用它，而不是我当前使用display: none 创建名为“隐藏”的类并根据需要添加或删除该类的方法。对此有何建议？
@RobMoll，我认为这更多是关于语义以及是否要将元素从隐藏状态设置为可见，或者不。

标签： javascript html google-chrome-extension hide show-hide

【解决方案1】：

您可以使用removeAttribute

document.getElementById("button").removeAttribute('hidden')

<p hidden id="button">
  <a id="dashboard-btn" 
     href="www.google.com" 
     target="_blank" 
     rel="noopener noreferrer">
      www.google.com
    </a>
</p>

【讨论】：

此外，这也有效：document.getElementById("button").style.display = "block";

【解决方案2】：

您使用属性 hidden 隐藏元素，因此您需要控制该属性而不是样式，例如：

document.getElementById("button").hidden = false;

<p hidden id="button">
    <a id="dashboard-btn" href="www.google.com" target="_blank" rel="noopener noreferrer">
      www.google.com
    </a>
</p>

参考：

hidden

【讨论】：

【解决方案3】：

我有几个解决方案：

一个

document.getElementById("button").hidden = "false";

由于 hidden 不是 css visibility : hidden; 属性。

这是一个属性。

B

正如@tacoshi 提到的，

.hidden {
  opacity: 0;
  transition: opaicty 1s ease;
  /* use opacity in case you want to have a beautiful transition */
}

然后使用

document.getElementById("button").classList.toggle("hidden")

【讨论】：

【解决方案4】：

试试这个

document.getElementById("button").removeAttribute("hidden")

【讨论】：

【解决方案5】：

您可以删除“隐藏”属性。

document.getElementById("button").removeAttribute("hidden")

【讨论】：