<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js无法获取缺省值</title> <style> .div1{ width: 200px; height: 330px; background-color: cyan; } </style> <script> window.onload = function(){ var oBtn = document.getElementById('btn01'); var oDiv = document.getElementById('div01'); oBtn.onclick = function(){ // if (oDiv.style.display == 'none'){ if (oDiv.style.display == 'block' || oDiv.style.display == ''){ // display == 'block' 这里不能直接设置为block. // 因为display == block语句,首先需要去style语句里面寻找display属性,虽然默认有display属性, 但是如果没有声明语句,则仍然无法找到. //所以, 要么判断none , 要么使用||或判断''空字节. oDiv.style.display = 'none'; } else{ oDiv.style.display = 'block'; } } } </script> </head> <body> <input type="button" name="" value="切换" id="btn01"> <div class="div1" id="div01"></div> </body> </html>