<!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. HDU 1576 A/B 数论水题

    http://acm.hdu.edu.cn/showproblem.php?pid=1576 写了个ex_gcd的模板...太蠢导致推了很久的公式 这里推导一下: 因为 1 = BX + 9973Y ...

  2. XSY3244 10.31 D

    XSY3244 10.31 D 题意: ​ 数轴上有\(N\)只老鼠\(M\)个洞,每个洞有一个容量,求所有老鼠进洞的最小代价.(\(N,M\leq1000000\),时限\(2s\)) 题解: ​ ...

  3. x264代码剖析（八）：encode()函数之x264_encoder_close()函数

    x264代码剖析(八):encode()函数之x264_encoder_close()函数 encode()函数是x264的主干函数.主要包含x264_encoder_open()函数.x264_en ...

  4. js12---闭包，原型，继承

    <html> <body> <script type="text/javascript"> //闭包实现了函数层面多个子函数共享父类函数的属性. ...

  5. checkbox-padding 调整checkbox字体跟图标距离

    有时候我们会遇到需要调整控件中的内容相对于容器的位置.这里有两种情况 1.linearlayout这样的容器中,包含button类的控件,这时候margin可以调节 2.textview中的文字内容 ...

  6. JS 图片大小自动调整 (img)

    <script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...

  7. Swagger文档转Word

    Swagger文档转Word 文档   GitHub 地址:https://github.com/JMCuixy/SwaggerToWord/tree/developer 原创作品,转载请注明出处:h ...

  8. Sql延时

    IF EXISTS(SELECT * FROM sys.procedures WHERE name='usp_wait30s')BEGIN DROP PROC usp_wait30sENDgocrea ...

  9.  洛谷 P3056 [USACO12NOV]笨牛Clumsy Cows

    P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...

  10. 让我们彻底看清MVC、MVP

    这里開始记录下来自己对MVC.MVP.MVVM这三种框架模式的理解,本文从以下几个方面来梳理. 架构的目的 框架模式.设计模式 MVC设计的介绍 MVC在Android中的应用 MVC该怎样设计 MV ...