一个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右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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实现数字补零功能的2个函数介绍
2014/05/12 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
用Python写冒泡排序代码
2016/04/12 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
itchat接口使用示例
2017/10/23 Python
numpy中索引和切片详解
2017/12/15 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
动态密码技术
2012/10/18 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
小型女装店的创业计划书
2014/01/09 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle