admin 管理员组

文章数量: 1086019

I have the following hidden <p> element in the body tag of my HTML file (for my chrome extension).

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

I want to unhide this using JavaScript. My random try that failed to unhide it:

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

[SOLVED] This (also) worked:

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

I have the following hidden <p> element in the body tag of my HTML file (for my chrome extension).

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

I want to unhide this using JavaScript. My random try that failed to unhide it:

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

[SOLVED] This (also) worked:

document.getElementById("button").style.display = "block";
  • javascript
  • html
  • google-chrome-extension
  • hide
  • show-hide
Share Improve this question edited Nov 11, 2021 at 15:04 stacvolken asked Nov 11, 2021 at 14:41 stacvolkenstacvolken 91 silver badge3 bronze badges 6
  • 1 why dont you hide with display: none and unhide it with display: block? or use element.removeAttribute(attrName)? – tacoshy Commented Nov 11, 2021 at 14:43
  • @tacoshy Why remove attribute instead of use the property of hidden attribute? – Simone Rossaini Commented Nov 11, 2021 at 14:49
  • @SimoneRossaini, if we replace display none with visibility hidden, then we can make a beautiful transition. And changing attribute directly or through the setter is not a big difference. But I think directly, like you mention is a more clean way – Mila A Commented Nov 11, 2021 at 14:52
  • 1 In 20+ years of using html I have never seen the hidden html attribute used in the wild. And I did not know it existed. Reading MDN makes me consider using it as opposed to my current method of creating a class named "hidden" with display: none and adding or removing that class as needed. Any advice regarding that? – Rob Moll Commented Nov 11, 2021 at 14:58
  • @RobMoll, I think it is more about semantics and whether you want to animate the element from hidden state to visible, or no. – Mila A Commented Nov 11, 2021 at 15:20
 |  Show 1 more ment

5 Answers 5

Reset to default 4

You can use removeAttribute

document.getElementById("button").removeAttribute('hidden')
<p hidden id="button">
  <a id="dashboard-btn" 
     href="www.google." 
     target="_blank" 
     rel="noopener noreferrer">
      www.google.
    </a>
</p>

You hide your element with attribute hidden so you need to control that attribute instead of style like:

document.getElementById("button").hidden = false; 
<p hidden id="button">
    <a id="dashboard-btn" href="www.google." target="_blank" rel="noopener noreferrer">
      www.google.
    </a>
</p>

Reference:

  • hidden

Try with this

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

You can remove the attribute "hidden".

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

I have several solutions:

A

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

As hidden is not a css visibility : hidden; property.

It is an attribute.

B

As @tacoshi mentioned,

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

And just use

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

本文标签： How to unhide a hidden html ltpgt tag element using JavaScriptStack Overflow

版权声明：本文标题：How to unhide a hidden html &lt;p&gt; tag element using JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744087805a2531462.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。