<!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. Atcoder At Beginner Contest 068 D - Decrease (Contestant ver.)

    D - Decrease (Contestant ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem S ...

  2. mysql 实行模糊查询 一个输入值匹配多个字段和多个输入值匹配一个字段

    mysql 实行模糊查询  一个输入值匹配多个字段 MySQL单表多字段模糊查询可以通过下面这个SQL查询实现 为啥一定要150字以上  真的麻烦  还不让贴代码了 SELECT * FROM `ma ...

  3. ＠转EXT2->EXT3->EXT4

    Linux文件系统第一篇—从Ext2到Ext3再到Ext4 1 概述 Linux继承了UNIX一切皆文件的设计哲学,用文件和树形目录的抽象逻辑概念代替了硬盘和光盘等物理设备使用数据块的概念,用户使用文 ...

  4. dot-files/directories 点开头的文件或文件夹（windows/linux）

    What's so special about directories whose names begin with a dot? 不管是 windows 系统,还是类 linux 系统,以点开头的文 ...

  5. Linux下读写寄存器

    arm裸机下读写寄存器很容易,各个寄存器和内存的地址是单一地址空间,他们是用相同的指令进行读写操作的.而在linux下就要复杂很多,因为linux支持多个体系架构的CPU.比如arm和x86就不一样, ...

  6. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  7. programming+windows+MFC

    1)CMyApp declares no data members 2)CWinApp::InitInstance run after application build but before the ...

  8. SpringMVC学习总结（2）——SpringMVC返回json配置

    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...

  9. hdu5384 AC自己主动机模板题，统计模式串在给定串中出现的个数

    http://acm.hdu.edu.cn/showproblem.php?pid=5384 Problem Description Danganronpa is a video game franc ...

  10. （转）oracle表空间使用率统计查询

    转自:http://www.cnblogs.com/xwdreamer/p/3511047.html 参考文献 文献1:http://blog.itpub.net/24104518/viewspace ...