<!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. 【记录】无法读取配置节“AppSettings”，因为它缺少节声明

    Web.config对大小写敏感, 把AppSettings改为appSettings即可.

  2. js获取单选button的值

    <!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...

  3. APACHE2.4 指定目录中的字符编码

    APACHE2.4 指定目录中的字符编码 xampp 的 apache2.4 默认字符编码是西文,中文字符显示乱码,在 httpd.conf 没有 AddDefaultCharset utf-8 这样 ...

  4. 自定义控件学习——下拉刷新ListView

    效果 开始用Android Studio写了,还有挺多不明白这IDE用法的地方....蛋疼 主要思路 1. 添加了自定义的头布局    2. 默认让头布局隐藏setPadding.设置 -自身的高度  ...

  5. Logstash读写性能调整优化

    继续

  6. Linux系统捕获数据包流程

    Linux系统捕获数据包流程 为了提高数据包的捕获效率,瓶颈问题是一个需要非常关注的焦点.减少在捕获数据包过程中的瓶颈,就能够提高数据包捕获的整体性能.下面本文将以Linux操作系统为平台,分析捕获数 ...

  7. 第一个使用Spring Tool Suite(STS)和Maven建立的Spring mvc 项目

    一.目标 在这篇文章中.我将要向您展示怎样使用Spring Frameworks 和 Maven build创建您的第一个J2ee 应用程序. 二.信息 Maven是一个java项目的构建工具(或者自 ...

  8. 使用Microsoft.Office.Interop.Excel时，64位问题

    前不久,碰到一个问题. 曾经用的好好的Microsoft.Office.Interop.Excel实现的导出Excel,迁移至64位server后,就出现: 检索 COM 类工厂中 CLSID 为 { ...

  9. J2SE核心开发实战(一）——认识J2SE

    认识J2SE 一.课程简单介绍 在本章学习開始前,你应该具备一些Java的基础知识. 我们将在本章来认识J2SE,并复习一下前面学过的面向对象的相关知识. 注:全部的蓝色文字都是带超链接的,这些链接是 ...

  10. 【例题 7-2 UVA - 11059】Maximum Product

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] C语言for循环练习题 [代码] /* 1.Shoud it use long long ? 2.Have you ever tes ...