例1：通过display隐藏盒子
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <style> *{ margin:0px; padding:0px; } .li{ list-style:none; } #p1{ width:200px; text-align:center; font:30px/60px simhei; } #p2{ width:200px; border:1px solid black; } ul{ margin-top:10px; border:1px solid black; display:none; } li{ height:60px; } li:hover{ background-color:blue; color:white; } </style> </head> <html> <p id ="p1"> <p id="p2">设置</p> <ul id="oul"> <li>搜索设置</li> <li>高级设置</li> <li>关闭预测</li> <li>搜索历史</li> </ul> </p> </html> <script> document.getelementbyid('p1').onmouseover=function(){ document.getelementbyid('oul').style.display='block'; } document.getelementbyid('p1').onmouseout=function(){ document.getelementbyid('oul').style.display='none'; } </script> </html>
当通过变量名var可以 继续实现：
var op1=document.getelementbyid('p1'); var oul=document.getelementbyid('oul'); op1.onmouseover=function(){ oul.style.display='block'; } op1.onmouseout=function(){ oul.style.display='none'; }
也可以通过透明的opacity,和高度来控制隐藏和显示。
制作百度登录效果，点击登录，弹出登录窗口，及退出
<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <style> body{ border:1px solid white } #login{ width:300px; height:300px; background-color:yellow; margin:0px auto; margin-top:200px; display:none; } .classclose{ width:40px; height:20px; font:16px/20px simhei; text-align:center; background-color:red; cursor:pointer; float:right; } </style> </head> <body> <p id="box" class="classclose">登录</p> <p id ="login"> <p id="close" class="classclose">退出</p> </p> </body> </html> <script> var obox=document.getelementbyid('box'); var ologin=document.getelementbyid('login'); var oclose=document.getelementbyid('close'); obox.onclick=function(){ ologin.style.display='block'; } oclose.onclick=function(){ ologin.style.display='none'; } </script> </html>
（即使简单也不可饿大意，以上便是diaplay方法控制盒子显示状态）。
相关推荐：
js按类名隐藏div之间的内容
在html里用css隐藏div的方法
javascript 显示/隐藏，创建/删除html元素用法实例详解
以上就是js简单隐藏效果的实例的详细内容。