DOM学习笔记2—元素节点的显示与隐藏

最新推荐文章于 2024-01-31 17:13:13 发布

yaomengjia

最新推荐文章于 2024-01-31 17:13:13 发布

阅读量269

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014393500/article/details/103861069

版权

这篇博客探讨了DOM中元素节点的显示与隐藏方法，包括使用visibility属性的hidden和visible状态，以及display属性的block和none，分别阐述它们在页面布局上是否占用空间的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码分割线====================================

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style type="text/css">
  </style>

</head>
<body>
  <label style="display:none" id="label">test</label><br>
  <input type="button" value="show" id="btn_show"/> 
  <input type="button" value="hide" id="btn_hide"/>
  
   <script type="text/javascript">
   
    var btn = document.getElementById('btn');
    btn_show.onclick = function() {
       document.getElementById('label').style.display="block";
    };
    btn_hide.onclick = function() {
       document.getElementById('label').style.display="none";
    };
  </script>
  
  </body>
</html>