<!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. AIX设备四种状态

    AIX设备四种状态: Undefined(未定义):表示系统无法识别该设备,也就是系统无法找到该设备.(驱动无法识别) Defined(定义):表示系统可以识别设备,信息保存在ODM,但是系统不能使用 ...

  2. touch---创建文件或更改文件日期

  3. C++的class的样例

    私有就是仅仅可以通过内部调用,在类外面是不可以使用私有成员的 简单的写一个  Class A {  public:    //你能够通过公有的函数去訪问私有成员    Demo()   //能够在这使 ...

  4. SICP 习题 （1.39）解题总结

    SICP 习题1.39沿着习题1.37, 1.38的方向继续前行,要求我们依据德国数学家J.H.Lambert的公式定义tan-cf过程,用于计算正切函数的近似值. J.H.Lambert的公式例如以 ...

  5. Google、Mozilla、Qt、LLVM 这几家的规范是明确禁用异常的

    作者:陈硕链接:https://www.zhihu.com/question/22889420/answer/22975569来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  6. gullo.me 的 natvps

    gullo.me 的 natvps 1. 在下面的地址中输入内网 IP,查看许可的网络资源 https://hosting.gullo.me/plugin/support_manager/knowle ...

  7. Filebeat的下载（图文讲解）

    第一步:进入Elasticsearch的官网 https://www.elastic.co/ 第二步:点击downloads https://www.elastic.co/downloads 第三步: ...

  8. golang beego cache

    package main import ( "fmt" "github.com/astaxie/beego/cache" "time" ) ...

  9. （转）修改 ubuntu 默认启动项

    转自: http://jingyan.baidu.com/article/afd8f4de58959134e386e969.html 当我们安装windows和ubuntu双系统以后,默认启动变成ub ...

  10. 洛谷 P1223 排队接水

    洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...