一个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最常用与实用的创建类的代码
Aug 12 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
javascript canvas实现雨滴效果
Jun 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
angular 服务随记小结
2019/05/06 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
机器学习10大经典算法详解
2017/12/07 Python
用Eclipse写python程序
2018/02/10 Python
对Python 内建函数和保留字详解
2018/10/15 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python双向链表原理与实现方法详解
2019/12/03 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python多线程的退出控制实现
2020/08/10 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
竞聘上岗演讲
2014/05/19 职场文书
结婚老公保证书
2015/02/26 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python