一个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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
jquery 插件学习(一)
Aug 06 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
微信小程序实现电子签名并导出图片
May 27 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
php中计算程序运行时间的类代码
2012/11/03 PHP
php cli 小技巧
2013/06/03 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
php实现学生管理系统
2020/03/21 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP图片水印类的封装
2017/07/06 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
常用的javascript function代码
2008/05/23 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
require.js中的define函数详解
2017/07/10 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
进一步了解Python中的XML 工具
2015/04/13 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python 发送邮件方法总结
2020/08/10 Python
python脚本定时发送邮件
2020/12/22 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
电大自我鉴定
2013/10/27 职场文书
学生会离职感言
2014/02/11 职场文书
学校节能减排倡议书
2014/05/16 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
战友聚会致辞
2015/07/28 职场文书