解决HTML节点属性为display:none的问题

爱被打了一巴掌 2021-09-20 15:54 920阅读 0赞

写了一个简单的例子，单击按钮会调用js中的change()函数使得div的display的属性边成none，效果就是使得图片被隐藏了。源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>display test</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript">
  7.         function change(){
  8.             document.getElementById("demo").style.display="none";
  9.         }
  10.     </script>
  11. </head>
  12. <body>
  13.     <h3>关于javascript修改节点属性的方法的尝试</h3>
  14.     <div id="demo" style="display:block">
  15.         <img src="1.jpg" width="100" height="100" alt="加载失败">
  16.     </div>
  17.     <button type="button" onclick="change()">点击触发函数</button>
  18. </body>
  19. </html>

单击后的效果如下：在这里插入图片描述
下面是显示隐藏内容，即显示display:none的节点的方法：

1.直接按F12（或是Fn+F12）,如下图，找到源码中display:none出，选中后去修改为display:block即可。
在这里插入图片描述
2.通过js函数来操作dom节点，也是按F12后选择Console,输入一下代码：

  1. document.getElementById("demo").style.display="block"

其中dome是标签 <div>的id,回车后也能显示出隐藏的内容，我这里是隐藏了一张图片。
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，920人围观）

还没有评论，来说两句吧...

相关阅读