<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #oDiv{ width:100px; height:300px; background: #ccc; display: none; } </style> </head> <body> <!-- 点击按钮，执行一个函数，该函数控制div的显示与隐藏，不用去获取按钮的id(getElementById) --> <input type="button" id = "btn" value = "点击" onclick = "showHide()"> <div id = "oDiv"></div> </body> <script type="text/javascript"> function showHide(){ var oBtn = document.getElementById("btn"); var oDiv = document.getElementById("oDiv"); if(oDiv.style.display == "block"){ oDiv.style.display = "none"; //为什么这里的block要加引号，可以参考该处css中的display中的设置 css中display是key,value是block或者none，value是个字符串 那么肯定要加引号了。 }else{ oDiv.style.display = 'block'; } } </script> </html>