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 等其他显示方式就是显示