一个JavaScript操作元素定位元素的实例
更新时间：2014年10月29日 16:48:14 投稿：whsnow
操作元素定位元素，大家会想到使用js来实现，下面有个不错的示例，大家可以看看
操作元素定位元素，用js来实现是个不错的选择，下面有个示例，需要的朋友可以看看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-操作元素定位元素</title>
<style>
div#a{
width:500px;
}
div{
border:1px solid #000;
padding:10px;
}
#cursor{
position:absolute;
background-color:#ff0;
width:20px;
height:20px;
left:50px;
top:300px;
}
</style>
<script>
function positionObject(obj){
var rect = obj.getBoundingClientRect();
return [rect.left,rect.top];
}
window.onload = function(){
var tst = document.documentElement.getBoundingClientRect();
alert(tst.top);
var cont = 'A';
var cursor = document.getElementById("cursor");
while(cont){
cont = prompt("where do you want to move the cursor block?","A");
if(cont){
cont = cont.toLowerCase();
if(cont == "a"||cont=="b"||cont=="c"){
var elem = document.getElementById(cont);
var pos = positionObject(elem);
console.log(pos);
cursor.setAttribute("style","top:"+pos[1]+"px;"+"left:"+pos[0]+"px");
}
}
}
}
</script>
</head>
<body>
<div id = "a">
<p>A</p>
<div id ="b">
<p>B</p>
<div id="c">
<p>C</p>
</div>
</div>
</div>
<div id="cursor">
</div>
</body>
</html>
相关文章
这篇文章主要介绍了微信小程序自定义组件components知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
有时候我们希望弹出层能够实现延迟关闭，并且鼠标在弹出层区域移动的时候能够保持显现，下面是具体的实现代码。2010-04-04
在Web开发中,实现前端的国际化i18n是一项重要的任务,它允许网站内容根据不同地区的用户需求进行本地化,下面这篇文章主要给大家介绍了关于前端国际化JS库i18n配置使用的相关资料,需要的朋友可以参考下2024-06-06
下面小编就为大家带来一篇浅谈JavaScript的计时器对象。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
本篇文章介绍了js操作iframe的一些方法的实例代码与步骤，有需要的朋友可以参考一下2013-06-06
这篇文章主要介绍了微信域名检测接口调用演示步骤（含PHP、Python），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript中定义变量时有无var声明的区别分析以及示例分享,需要的朋友可以参考下2014-08-08
下面小编就为大家带来一篇js中变量的连续赋值(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
变量是程序在内存中申请的一块用来存放数据的空间,下面这篇文章主要给大家介绍了关于JavaScript如何正确声明和使用变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
coze是字节跳动旗下的零代码大模型Agent定制平台,下面这篇文章主要介绍了前端对话框项目之调用字节Coze API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
最新评论