每天一个JavaScript实例-操作元素定位元素
<!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实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-推断图片是否载入完毕
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 每天一个JavaScript实例-动态省份选择城市
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-递归实现反转数组字符串
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 每天一个JavaScript实例-防止反复表单提交
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- C/C++(共用体与枚举)
共用(Union)与枚举(Enum) 共同体 c语言中,不同的成员使用共同的存储区域的数据结构类型称为共用体.(共用,联合体),共用体在定义,说明,适用形式上与结构体相似.两者本质上的不同在于使用内存 ...
- vsphere client和vsphere web client的区别
vsphere client是一个运行在windows桌面上的客户端,在linux环境下无法运行,在vsphere5.0以后,VMware在逐渐弱化vsphere client的作用,现在很多高级功能 ...
- CODEVS——T2744 养鱼喂妹纸
http://codevs.cn/problem/2744/ 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Descr ...
- RecyclerView下拉刷新和载入很多其它
之前一直写的是ListVIew下拉刷新,可是好多朋友都说要RecycleView的下拉刷新和滑动载入.事实上,这个原理都是几乎相同.抽出时间,我就写了下RecycleView的下拉刷新和滑动载入很多其 ...
- Spring有用功能--Profile、WebService、缓存、消息、ORM
本篇介绍一些Spring与其它框架结合的有用功能,包含:Apache CXF WebService框架.Redis缓存.RabbitMQ消息.MyBatis框架. 另外对于Profile,也是Spri ...
- hdu2768Cat vs. Dog (反建法，最大独立集)
Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- Android——解决port占用问题导致的模拟器无法识别
遇到一个问题:昨天模拟器工作还正常,今天eclipse就识别不了了.后来发现是360手机助手占用了5555port造成的,我就纳闷了,平时这个也不是自己主动启动.今天就启动了.废话不多说,就几个步骤就 ...
- UVa10397_Connect the Campus(最小生成树)(小白书图论专题)
解题报告 题目传送门 题意: 使得学校网络互通的最小花费,一些楼的线路已经有了. 思路: 存在的线路当然全都利用那样花费肯定最小,把存在的线路当成花费0,求最小生成树 #include <ios ...
- Android自定义视图
Android框架为我们提供了大量的视图类来帮助我们做好展示信息以及同用户进行交互的工作.然后有时候,我们的app或许需要一些在Android内建视图之外特殊的视图,那么此时我们就需要自定义视图.下面 ...
- Day3下午解题报告
预计分数:20+40+30=90 实际分数:40+90+60=190 再次人品爆发&&手感爆发&&智商爆发 谁能告诉我为什么T1数据这么水.. 谁能告诉我为什么T2数据 ...