CSS隐藏元素的方法和区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> </style> </head> <body> <button id="btn" onclick="cl()"> 点我 </button> </body> <script type="text/javascript"> var flag = true; function cl() { if(flag){ //visibility是隐藏了元素(保留了原来的占位)，并且不能再交互 document.getElementById('btn').style.visibility = 'hidden'; //display是从html去除了元素，不再占位，更别提交互的事 document.getElementById('btn').style.display = 'none'; //opacity就是骗你的，你看上不见是因为隐形了，其实它还在那里，不离不弃(占位且不影响交互) document.getElementById('btn').style.opacity = 0; flag = false; }else{ document.getElementById('btn').style.visibility = 'visible'; document.getElementById('btn').style.display = 'block'; document.getElementById('btn').style.opacity = 1; flag = true; } } </script> </html>