<!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实例-操作元素定位元素的更多相关文章

  1. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-canvas绘图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. myBatis通过逗号分隔字符串,foreach

    前言 当数据库里存储的值是以逗号分隔格式存储的字符串时. 数据格式如下:  id name  ids   1  张三  a,b,c  2  李四  c,d,e 我们拿到的条件参数是:b,e 1.后台通 ...

  2. 【Codeforces Round #427 (Div. 2) B】The number on the board

    [Link]:http://codeforces.com/contest/835 [Description] 原本有一个数字x,它的各个数码的和原本是>=k的; 现在这个数字x,在不改变位数的情 ...

  3. Wget使用

    http://www.tuicool.com/articles/A7BRny wget / curl 是两个比较方便的测试http功能的命令行工具,大多数情况下,测试http功能主要是查看请求响应 头 ...

  4. 怎样使用 OneAPM 监控微软 Azure Cloud Service ？

    不知不觉微软 Azure 已经进入中国市场近两年的时间.那么 Azure 平台的性能到底怎样?资源载入的延迟.虚拟机的稳定性等问题是否切实满足客户期许.这些都是大家对微软 Azure 这个国外的云服务 ...

  5. Centos6.4安装opennebula

    Centos6.4安装opennebula #安装163源 http://mirrors.163.com/.help/CentOS6-Base-163.repo #安装epel源 wget http: ...

  6. 从USB闪存驱动器启动 Hiren的BootCD --制作U盘启动盘

    从USB闪存驱动器启动 Hiren的BootCD 原文  http://www.hirensbootcd.org/usb-booting/ 本文基本上是翻译而来 要从USB闪存驱动器启动Hiren的B ...

  7. thinkphp验证码（总结之后，效率非常好）

    thinkphp验证码(总结之后,效率非常好) 一.总结 1.总结:总结之后,效率非常好,复习的时候也才方便,也能深入到细处,非常方便建立熟悉感和突破使用困境 2.验证码使用中文集或者繁体集设置:这个 ...

  8. 比较s+=4;和s=s+4;的不同

    1.s=s+4: public class Test { public static void main(String[] args){ short s=3; // s=s+4; //描述 资源 路径 ...

  9. linux下uboot kernel操作cpu寄存器

    大多数的内核里面都有会对GPIO的操作,而且内核里面对GPIO进行配置也很方便,要什么功能就配置成什么就可以了. 还有一些寄存器是内核没有配置到的,但是我们要操作怎么办,内核里面也定义了相关的接口函数 ...

  10. C# Find() 与 FindAll()方法的使用

    Find()   :检索与指定匹配的第一个元素 FindAll()   : 检索与指定匹配的所有元素 如:List<string> strList=new List<string&g ...