提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

一个JavaScript操作元素定位元素的实例

JavaScript实例定位 操作 一个 元素
2023-06-13 09:15:29 时间

操作元素定位元素，用js来实现是个不错的选择，下面有个示例，需要的朋友可以看看

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>每天一个JavaScript实例-操作元素定位元素</title>
<style>
div#a{
width:500px;
}
div{
border:1pxsolid#000;
padding:10px;
}
#cursor{
position:absolute;
background-color:#ff0;
width:20px;
height:20px;
left:50px;
top:300px;
}
</style>
<script>
functionpositionObject(obj){
varrect=obj.getBoundingClientRect();
return[rect.left,rect.top];
}
window.onload=function(){
vartst=document.documentElement.getBoundingClientRect();
alert(tst.top);
varcont="A";
varcursor=document.getElementById("cursor");
while(cont){
cont=prompt("wheredoyouwanttomovethecursorblock?","A");
if(cont){
cont=cont.toLowerCase();
if(cont=="a"||cont=="b"||cont=="c"){
varelem=document.getElementById(cont);
varpos=positionObject(elem);
console.log(pos);
cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px");
}
}

}
}
</script>
</head>

<body>

<divid="a">
<p>A</p>
<divid="b">
<p>B</p>
<divid="c">
<p>C</p>
</div>
</div>
</div>
<divid="cursor">

</div>
</body>
</html>

相关文章