How to unhide a hidden html <p> tag element using JavaScript?

Question

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.com" target="_blank" rel="noopener noreferrer">
      www.google.com
    </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";

Answer 1

You can use 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>

Answer 2

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.com" target="_blank" rel="noopener noreferrer"> www.google.com </a> </p>

Reference:

• hidden

Answer 3

试试这个

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

Answer 4

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

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

Answer 5

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")