一个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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
js实现文本框选中的方法
May 26 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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 foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python实现的分层随机抽样案例
2020/02/25 Python
python实现斗地主分牌洗牌
2020/06/22 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
python中Mako库实例用法
2020/12/31 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
工作态度检讨书范文
2015/05/06 职场文书
详细介绍python类及类的用法
2021/05/31 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python