一个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 scrollTop正解使用方法
Nov 14 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
element中el-container容器与div布局区分详解
May 13 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
动态加载iframe
2006/06/16 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
微信小程序 上传头像的实例详解
2017/10/27 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python内存动态分配过程详解
2019/07/15 Python
Python map及filter函数使用方法解析
2020/08/06 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python使用建议技巧分享(三)
2020/08/18 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
计算机本科生自荐信
2013/10/15 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
自主招生专家推荐信
2015/03/26 职场文书
个人催款函范文
2015/06/23 职场文书
个人工作决心书
2015/09/22 职场文书
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers