用html消失内容 [英] Dissappear content with html

问题描述

我在玩一些 html 并认为我可能会遇到一些可以用于我的网站的东西.好吧，当我在玩 html 时，我遇到了隐藏 html 内容的问题，所以我想到了一个可以做到这一点的代码.这是我的代码.

I was playing with some html and thought I might come across something I can use for my website. Well, while I was playing with html, I came across hiding html content and so I thought of a code that might do it. Here is my code.

<input type = "checkbox"  id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
}
</script>

我想知道这是否是最有效的方法，或者是否可以占用最少的存储空间.如果没有，请帮忙.谢谢.

I was wondering if this was the most efficient way to do this, or if can take about the least amount of storage. If not, please help. Thank you.

推荐答案

您在这里以错误的方式使用了复选框.我们必须使用 checked 属性来代替

You are using a checkbox in a wrong way here. We must work with for checked property instead

if(b =="on"){
  document.getElementById("demo").style.visibility = "hidden"
}

b=="on" 是一个真实的字符串并且始终为真.

b=="on" is a truthy string and is always true.

另外，最好使用 display:none; 而不是 hidden.

Also, best is to use display:none; instead of hidden.

document.getElementById("demo").style.display= "none";

完整工作代码:只有当输入被选中并且我们点击下面的div时才会消失(这在这个例子中更有意义).试试这个

FULL WORKING CODE: Only when the input is checked and we click on the the below div should disappear (This makes more sense in this example). Try this

<input type = "checkbox"  id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
   var b = document.getElementById("on");
   console.log(b);
  if(b.checked){
    document.getElementById("demo").style.display = "none";
  }
}
</script>

这篇关于用html消失内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！