在用js做动态效果时，通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告，就要不停的获取元素的top和left属性值。

需要注意的事：取值的元素必须要设置position:absolute绝对定位属性，才能取的到left值。

第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。

第二种方法 只读，可以获取所有style样式，存在兼容性问题，在标准浏览器中可以通过window.getComputedStyle(对象，null).left方法来获取元素的left和top的属性值。而在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。

第三种方法，使用obj.offsetLeft来获取对象的left属性值,用obj.offsetTop来获取对象的top属性值。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{

			margin: 0;padding: 0;

		}

		#boxs{

			width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 0;left:10px;

		}

	</style>

</head>

<body>

	<div id="boxs">这是一个盒子</div>

	<div id="ctns" style="width: 500px;height: 300px;border: 1px solid blue;position: absolute;top: 210px;left:20px;">这是第二个</div>

</body>

<script type="text/javascript">

	// 1，第一种方法 obj.style.left 只能获取行内样式的left值

	var boxs = document.getElementById('boxs');

	var ctns = document.getElementById('ctns');

	var a = boxs.style.left;

	console.log(a);	//值是空，没有

	var a2 = ctns.style.left;

	console.log(a2);	//值是20px

	// 2，第二种方法，获取所有类型样式值，要写兼容

	//支持w3c规范的浏览器

	var b2= window.getComputedStyle(boxs).left;

	console.log(b2);	//10px

	//兼容IE9以下写法

	var b3 = window.getComputedStyle? window.getComputedStyle(boxs).left : boxs.currentStyle.left;

	console.log(b3);	//10px

	// 3，第三种方法 使用obj.offsetLeft

	var c = boxs.offsetLeft;

	var c2 = ctns.offsetLeft;

	console.log(c);		//值是10

	console.log(c2);	//值是20

</script>

</html>

　　

原生js获取left值和top值的更多相关文章

  1. 原生js获取复选框的值

    ​​ obj = document.getElementsByName("dk_tj"); var longtxt = ""; for (k in obj) { ...

  2. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...

  3. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  4. js获取每个按键的ASCII值

    通过js绑定键盘按下事件onkeydown获取每个按键的ascII值. js获取每个按键的ascii值 <script language="javascript"> / ...

  5. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...

  6. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  7. js获取url的参数和值的N种有效方法

    js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...

  8. js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...

  9. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  10. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

随机推荐

  1. Java采用内部构造器Builder模式进行对类进行构建

    好处: 能保证重叠构造器模式的安全性: 能保证JAVABeans模式的可读性: package cn.lonecloud.builder; /** * 使用内部类构建器来对这个类进行构造 * @Tit ...

  2. ubuntu上lamp环境搭建

    首先,介绍个彻底删除linux已经安装的软件的方法. sudo apt-get purge mysql-server mysql-client mysql-common mysql-server-5. ...

  3. C语言_了解一下C语言中的四种存储类别

    C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. C语言中的四种存储类别:auto ...

  4. hihoCoder 1033 : 交错和 数位dp

    思路:数位dp,dp(i, j, k)表示考虑i位数,每位数可以任意取[0~9],并且这i位数的交错和为j,k=1表示前缀全是0(如000456),k=0表示前缀不为0.注意,前缀是否为0是这道题的一 ...

  5. 2.5 非透明PCI桥

    PCI桥规范定义了透明桥的实现规则,本篇在第2.3.1节中详细介绍了这种桥片.通过透明桥,处理器系统可以以HOST主桥为根节点,建立一颗PCI总线树,在这个树上的PCI设备共享同一个PCI总线域上的地 ...

  6. mysql常用基础操作语法（一）~~对库的操作【命令行模式】

    1.创建数据库:create Database databaseName;例如需要创建mysqlTest数据库,create Database mysqlTest; 由此还可以看出,这里的名称是不分大 ...

  7. mysql字符串连接

    用SQL Server 连接字符串是用“+” 现在数据库用mysql, 写个累加两个字段值SQL语句居然不支持"+",郁闷了半天在网上查下,才知道mysql里的+是数字相加的操作, ...

  8. 如何修改WinPE Boot的.wim镜像文件

    1. 使用imagex /apply或imagex /mountrw将WIM镜像文件mount到某个文件夹,假设为d:\tmp\winpe_x86\mount.  例: imagex /mountrw ...

  9. JLINK（SEGGER）灯不亮 USB不识别固件修复、clone修改

    今天调SMT32插拔几下,JLINK竟然挂掉了网上找了这个教程,搞了半天才搞好,驱动没装好!WIN7系统,自动安装的驱动是GPS.COM10,郁闷,错误来的.应该是:atm6124.sys.要手动选择 ...

  10. E: 未发现软件包 install_flash_player_11_linux.x86_64.tar.gz

    1 错误描述 youhaidong@youhaidong:~$ sudo apt-get install install_flash_player_11_linux.x86_64.tar.gz 正在读 ...