切换 显示与隐藏页面元素 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7         function showAndHidden(id,btid){
 8             var target = document.getElementById(id);
 9             target.hidden = !target.hidden;
10             if(target.hidden){
11                 document.getElementById(btid).innerHTML = "显示";
12             }else{
13                 document.getElementById(btid).innerHTML = "隐藏";
14             }
15         }
16     </script>
17 </head>
18 <body>
19     <button id="bt1" onclick="showAndHidden('target','bt1')">显示</button>
20     <div id="target" hidden="true" style="height: 80px">
21         文字内容
22     </div>
23 </body>
24 </html>

hidden 元素属性 与CSS中的display等效，display:none 就是隐藏，display: block 等其他显示方式就是显示

posted @ 2015-06-21 13:35  csnmd  阅读(514)  评论(0)  编辑  收藏  举报