原生js获取left值和top值
在用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值的更多相关文章
- 原生js获取复选框的值
obj = document.getElementsByName("dk_tj"); var longtxt = ""; for (k in obj) { ...
- Js获取后台集合List的值和下标的方法
Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- js获取每个按键的ASCII值
通过js绑定键盘按下事件onkeydown获取每个按键的ascII值. js获取每个按键的ascii值 <script language="javascript"> / ...
- 网站开发进阶(十八)js获取html标签中的值
js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- js获取url的参数和值的N种有效方法
js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...
- js 获取和设置css3 属性值的实现方法
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...
- 原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
- 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
随机推荐
- 手把手教你树莓派实现简易室内监控系统（A）
第一次写博文,有很多疏漏之处,然后受逼乎影响较深,希望大家多多包涵! _______________________________________________分割线是这样画的吧_________ ...
- SVN高级
#查找有关svn关键字的目录及文件 find / -name "*svn*" find / -name "*Svn*" find / -name "* ...
- 软AP的实现------dhcpserver交叉编译
代码版本:dhcp-4.2.5-P1 cd dhcp--P1; ./configure --host=arm-XXX-linux ac_cv_file__dev_random=yes; cd ./bi ...
- UVA - 10285 Longest Run on a Snowboard （线性DP）
思路:d[x][y]表示以(x, y)作为起点能得到的最长递减序列,转移方程d[x][y] = max(d[px][py] + 1),此处(px, py)是它的相邻位置并且该位置的值小于(x, y)处 ...
- hbase存储优化
1.上面的2张图主要说明hbase的存储特点 (1).每个值(每条记录的每一个列的值)的存储,都完整的存储了rowkey.column family.column.版本(时间戳),以及该列的值. 这样 ...
- pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系
如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250 不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度 再看下控制台: 由此可计算浏 ...
- python 循环语句 函数 模块
python循环语句 while循环语法结构 当需要语句不断的重复执行时,可以使用while循环 while expression: while_suite 语句ehile_suite会被连续不断的循 ...
- linux Nagios监控
监控目标 监控目标主机分为四个部分 硬件资源 操作系统 数据库 应用软件 监控目的: 进行服务器性能调整前,知道调整什么,系统瓶颈在什么地方 被一部分必须同时监控,内容包括吞吐量,反应时间,使用率等 ...
- AHB/APB简介
AHB AHB总线互联结构图 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的 ...
- mysql常用基础操作语法（一）~~对库的操作【命令行模式】
1.创建数据库:create Database databaseName;例如需要创建mysqlTest数据库,create Database mysqlTest; 由此还可以看出,这里的名称是不分大 ...