你如何 add/remove 隐藏在 <p hidden> 与 JavaScript

Question

如何在 <p hidden>My Text</p> 中添加和删除 'hidden'？

我尝试删除该属性并将其设置为 false，但两者均无效。

  let p = document.getElementsByTagName('p');
  let myText;
    
  for (i = 0; i < p.length; i++) {
    if (p[i].innerHTML == "My Text") {
      myText = p[i];
      break;
    }
  }

  myText.removeAttribute("hidden"); // no effect
  myText.setAttribute("hidden", false); // no effect

Answer 1

这里看起来不错。如果您愿意，请尝试使用此代码。

index.html

<html>
<head>

</head>
<body>
      <p hidden>My Text</p>
</body>
</html>

脚本

let p = document.getElementsByTagName('p');
let myText;

for (i = 0; i < p.length; i++) {
  if (p[i].innerHTML == "My Text") {
    // console.log(myText, p[0].innerHTML);
    myText = p[i];
    break;
  }
}

myText.removeAttribute("hidden");

在codePen中可以看到 https://codepen.io/anon/pen/qozVaq

Answer 2

function show(){
x = document.getElementsByTagName('p');
if(x[0].style.visibility === "hidden"){
   x[0].style.visibility = "visible"   
 }else{
   x[0].style.visibility = "hidden"  
}}

<p >this is hidden</p>
<button onClick='show()'>show</button>

Answer 3

你可以在 <p> 标签上设置一个 ID 并以此方式与之互动吗？

<p id="whatever" hidden>My Text</p>

并且：

let p = document.getElementById('whatever');
p.removeAttribute("hidden");

Answer 4

删除比较文本对我来说效果很好：

let p = document.getElementsByTagName('p');
    let myText;
    for (i = 0; i < p.length; i++) {
        var txt = document.getElementsByTagName('p')[i].innerHTML;
        if (p[i].innerHTML == txt) {
            myText = p[i];
            break;
        }
    }

myText.removeAttribute("hidden");

这是工作版本：https://jsfiddle.net/j0467m8m/15/

Answer 5

您一定是给图像设置了块状显示，这可能会导致您现在的错误。删除显示样式，您应该可以开始了。

Answer 6

而不是使用 addAttribute 和 removeAttribute 使用：

myText.hidden = false
// or
myText.hidden = true

你如何 add/remove 隐藏在 <p hidden> 与 JavaScript

How do you add/remove hidden in <p hidden> with JavaScript

html

javascript

hidden

attributes