一个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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue 中directive功能的简单实现
Jan 05 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
2020最新CPU的性能排名
2020/04/02 数码科技
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python多项式回归的实现方法
2019/03/11 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python实现在线翻译
2020/06/18 Python
python如何写个俄罗斯方块
2020/11/06 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
最新自我评价范文
2013/11/16 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
春节联欢会主持词
2014/03/24 职场文书
2014年党课学习材料
2014/05/11 职场文书
医学生求职自荐书
2014/06/12 职场文书
启动仪式策划方案
2014/06/14 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
出售房屋协议书范本
2014/10/06 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年电教工作总结
2015/05/26 职场文书
中学总务处工作总结
2015/08/12 职场文书
公历12个月名称的由来
2022/04/12 杂记