如何使用JavaScript取消隐藏带有hidden属性的HTML <p> 标签元素

开发Chrome扩展时，HTML文件body标签内存在如下带hidden属性的隐藏

元素：

<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';

失效原因 #

HTML原生hidden全局属性的实现逻辑是将元素的display属性强制设为none，和visibility属性控制逻辑完全独立：

• visibility: hidden仅让元素视觉上不可见，元素仍占据原有的页面布局空间
• display: none会让元素完全脱离文档流，既不渲染显示，也不占用页面空间
  因此修改visibility属性无法覆盖hidden属性带来的隐藏效果。

解决方法 #

方法1：修改display属性（已验证可行） #

将元素的display属性设为块级元素默认值即可显示：

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

方法2：直接移除hidden属性（更标准的原生写法） #

直接删除元素上的hidden属性，也可实现显示效果，逻辑更直观：

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

内容的提问来源于stack exchange，提问作者stacvolken