代码如下,我封装了一个classname方法,为什么console不到box,显示undifined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度遮罩拖拽</title>
<style>
*{margin:0;padding:0}
body{background:url(images/baidu_demo.png) no-repeat top center;}
.login a{position:absolute;top:0;right:0;color:#000000}
.mask{height:100%;width:100%;background: #5E5E5E;opacity: 0.5;filter:Alpha(opacity=50);display:none;}
.box{width:260px;height:auto;position:absolute;background:#fff;border:1px solid #5E5E5E}
.box-title{height:36px;line-height:36px;background:#E3E3E3;text-align:center;}
.box-close{background: url(images/close_def.png) no-repeat 2px 2px;width:40px;height:36px;position:absolute;right:0;top:0;cursor: pointer;}
.input1{width:80%;height:30px;outline:none;margin:0 auto;display:block;}
.input2{width:80%;height:30px;outline: none;margin:0 auto;display:block;}
.forget-password{display:block;}
.login-in{background: #FFA500;height:40px;width:100%;display:block;}
</style>
</head>
<body>
<div class="login">
<a href="">登陆</a>
</div>
<div class="mask"></div>
<div class="box">
<div class="box-title">
<h2>登陆通行证</h2>
<div class="box-close"></div>
</div>
<input type="text" class="input1" />
<input type="password" class="input2" />
<a href="#" class="forget-password">忘记密码</a>
<a href="#" class="login-in">登陆</a>
<a href="#" class="zhuce">立即注册</a>
</div>
<script>
function getElementsByClassName(className,parent){
var oParent=parent?document.getElementById("parent"):document;
var oLis=oParent.getElementsByTagName("*");
var arr=[];
for(var i=0;i<oLis.legnth;i++){
if(oLis[i].className==className){
arr.push(oLis[i])
};
return arr;
}
};
function g(id){
return document.getElementById("id");
};
function autoCenter(el){
var clientX=document.documentElement.clientWidth||document.body.clientWidth;
var clientY=document.documentElement.clientHeight||document.body.clientHeight;
el.style.left=(clientX-el.offsetLeft)/2+"px";
el.style.top=(clientY-el.offsetTop)/2+"px";
};
function fullscreen(el){
var clientX=document.documentElement.clientWidth||document.body.clientWidth;
var clientY=document.documentElement.clientHeight||document.body.clientHeight;
el.style.left=clientX+"px";
el.style.top=clientY+"px";
}
console.log(getElementsByClassName("login"));
</script>
</body>
</html>
两个错误
for(var i=0;i<oLis.legnth;i++){
这里拼写错误,应该是oLis.length
return arr;
应该放在for
的外面另外,建议你用
filter
和classList.contains()
,看起来简洁一点