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


Posted in Javascript onOctober 29, 2014

操作元素定位元素,用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>
Javascript 相关文章推荐
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
js比较日期大小的方法
May 12 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
js实现ArrayList功能附实例代码
Oct 29 #Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 #Javascript
js中的json对象详细介绍
Oct 29 #Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 #Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
JavaScript中的迭代器和生成器详解
Oct 29 #Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Djang中静态文件配置方法
2015/07/30 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python实现日常记账本小程序
2018/03/10 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
家长会演讲稿范文
2014/01/10 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
授权委托书格式模板
2014/04/03 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
升学宴答谢词
2015/01/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
导游词之桂林山水
2019/09/20 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Golang全局变量加锁的问题解决
2021/05/08 Golang
压缩Redis里的字符串大对象操作
2021/06/23 Redis