码迷,mamicode.com
首页 > Web开发 > 详细

js显示隐藏

时间:2016-12-06 03:23:20      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:text   odi   utf-8   click   font   document   set   onclick   back   

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#box{

width: 100px;

height: 100px;

background-color: #F0F;

display: none;

}

</style>

</head>

<script type="text/javascript">

window.onload=function(){

var oBtn=document.getElementById(‘btn‘);

var oDiv=document.getElementById(‘box‘);

oBtn.onclick=function(){

if(oDiv.style.display==‘none‘){

oDiv.style.display=‘block‘;

}else{

oDiv.style.display=‘none‘;

}

}  

}/*if的判断条件找的是行间样式 现在行间样式是display:block; 所以第一次执行的是oDiv.style.display=‘none‘;正确做法 1. if(oDiv.style.display==‘block‘){

oDiv.style.display=‘none‘;

}else{

oDiv.style.display=‘block‘;

}

2. 把内部样式的display:none;改为 行间样式display:none; */

</script>

<body>

<input type="button" value="登陆" id="btn">

 <div id="box"></div>

</body>

</html>

js显示隐藏

标签:text   odi   utf-8   click   font   document   set   onclick   back   

原文地址:http://www.cnblogs.com/guolimin/p/6135884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!