<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
*{
margin: 0;
padding:0;
font-size: 16px;
}
#login_box{
width: 300px;
height: 150px;
border:1px solid #C7B0B0;
background: #F0E6E6;
margin: 180px auto;
display: none;
}
#login_box p{
font-size: 14px;
font-weight: bold;
height: 30px;
line-height: 30px;
border-bottom:1px solid #C7B0B0;
}
</style>
<script type="text/javascript">
window.onload=function(){
var login_btn=document.getElementById('login'),
login_box=document.getElementById('login_box'),
// 封装添加事件监听程序
function addEvent(ele,type,hander){
if(ele.addEventListener){
ele.addEventListener(type,hander,false);
}else if(ele.attachEvent){
ele.attachEvent('on'+type,hander);
}else{
ele['on'+type]=hander;
}
}
// 显示登录层函数
function showlogin(){
login_box.style.display='block';
}
// 隐藏登录层函数
function hidelogin(){
login_box.style.display='none';
}
addEvent(login,'click',showlogin);
}
</script>
</head>
<body>
<div id="head">
亲，您好！
<input type="button" value="登录" id="login"/>
</div>
<div id="login_box">
<p>用户登录</p>
</div>
</body>
</html>
为什么我写的代码会运行不了？而且把老师的代码里面关于id=close的标签和属性删除之后运行不了，添加了反而可以运行？
addEvent(login,'click',showlogin);这里写错了，取到的元素命名为login_box，把第一个参数改为login_box就可以了。