js實現點選按鈕出現div，點選空白又消失
阿新 • • 發佈：2018-12-28
主要就是兩個點選按鈕，一個是點選讓 div出現，一個是點選空白地方讓它消失，在做的時候先給div新增display：none;進行隱藏，第一次去點選按鈕，讓它變成block，不過要加一個stopPropagation()進行阻止冒泡，然後在寫另一個點選消失的事件，變成none就解決了。div的內容自行新增，我這裡就添加了一個背景顏色以便於效果實現。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 300px; background-color: #BCBCBC; display: none; } </style> </style> </head> <body> <button>按鈕</button> <div></div> <script> var But=document.getElementsByTagName("button")[0]; var oDiv=document.getElementsByTagName("div")[0]; But.onclick=function(e){ //點擊出現 oDiv.style.display="block"; e.stopPropagation(); //阻止冒泡 } // 點選空白消失 document.onclick=function(e){ oDiv.style.display="none"; } </script> </body> </html>