在用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属性值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7. 		*{
  8. 			margin: 0;padding: 0;
  9. 		}
  10. 		#boxs{
  11. 			width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 0;left:10px;
  12. 		}
  13. 	</style>
  14. </head>
  15. <body>
  16. 	<div id="boxs">这是一个盒子</div>
  17. 	<div id="ctns" style="width: 500px;height: 300px;border: 1px solid blue;position: absolute;top: 210px;left:20px;">这是第二个</div>
  18. </body>
  19. <script type="text/javascript">
  20. 	// 1，第一种方法 obj.style.left 只能获取行内样式的left值
  21. 	var boxs = document.getElementById('boxs');
  22. 	var ctns = document.getElementById('ctns');
  23. 	var a = boxs.style.left;
  24. 	console.log(a);	//值是空，没有
  25.  
  26. 	var a2 = ctns.style.left;
  27. 	console.log(a2);	//值是20px
  28.  
  29. 	// 2，第二种方法，获取所有类型样式值，要写兼容
  30. 	//支持w3c规范的浏览器
  31. 	var b2= window.getComputedStyle(boxs).left;
  32. 	console.log(b2);	//10px
  33. 	//兼容IE9以下写法
  34. 	var b3 = window.getComputedStyle? window.getComputedStyle(boxs).left : boxs.currentStyle.left;
  35. 	console.log(b3);	//10px
  36.  
  37. 	// 3，第三种方法 使用obj.offsetLeft
  38. 	var c = boxs.offsetLeft;
  39. 	var c2 = ctns.offsetLeft;
  40. 	console.log(c);		//值是10
  41. 	console.log(c2);	//值是20
  42.  
  43. </script>
  44. </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. MySQL主从复制_复制过滤

    关于主从过滤,建议只在从服务器做设定,在Master 端为保证二进制日志的完整, 不建议使用二进制日志过滤. Master 可用参数: binlog-do-db= #定义白名单,仅将制定数据库的相关操 ...

  2. CodeForces - 796C Bank Hacking

    思路:共有n-1条边连接n个点,即形成一棵树.一开始需要选择一个点hack--将这个点视为根结点,与它相邻的点防御值加1,与它相隔一个在线点的点的防御也加1.当根节点被hack,即这个点被删除,又变成 ...

  3. APP性能测试（电量）

    #encoding:utf-8 import csv import os import time #控制类 class Controller(object): def __init__(self, c ...

  4. Spring IO Platform 解决Spring项目组合中版本依赖

    简介: Spring IO Platform是Spring官网中排第一位的项目.它将Spring的核心API集成到一个适用于现代应用程序的平台中.提供了Spring项目组合中的版本依赖.这些依赖关系是 ...

  5. B树、B-树、B+树、B*树【转】,mysql索引

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

  6. DSP_TMS32F2812的串口操作

    void scia_fifo_init(int ibaud) { SciaRegs.SCICCR.all =0x0007; // 1 stop bit, No loopback // No parit ...

  7. Android RocooFix热修复动态加载框架介绍

    RocooFix Another hotfix framework 之前的HotFix项目太过简单,也有很多同学用Nuwa遇到很多问题,作者也不再修复,所以重新构建了一套工具. Bugfix 2016 ...

  8. Java之split方法

    Java之split方法 1.间隔号"." (1)str.split(".") String str = "10.156.35.87"; S ...

  9. Java Web项目（Extjs）报错六

    1.Java Web项目(Extjs)报错六 具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ...

  10. 草料Chrome浏览器插件，让二维码更好用

    安装插件草料chrome插件,是专为chrome核心的浏览器开发的一个二维码应用增强工具插件. 自动将地址栏链接生成二维码 以谷歌原生的chrome浏览器为例,插件安装成功后会在浏览器地址栏旁边出现一 ...