原生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无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
随机推荐
- linux中权限对文件和目录的作用
chmod 755 a.txt 文件: r:读取文件内容(cat more head tail) w:编辑,新增,修改文件的内容(vi,echo) 不包括删除文件:原因是只能对文件内容进行修改,而在l ...
- maven中的profile文件的解析
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- java中的Collection集合类
随着1998年JDK 1.2的发布,同时新增了常用的Collections集合类,包含了Collection和Map接口.而Dictionary类是在1996年JDK 1.0发布时就已经有了.它们都可 ...
- 《android开发艺术探索》读书笔记（一）--Activity的生命周期和启动模式
No1: 如果新Activity采用了透明主题,那么当前Activity不会回调onStop: No2: 新Activity启动之前,栈顶的Activity需要先onPause后,新Activity才 ...
- AGC010 - D: Decrementing
原题链接 题意简述 给出一个个数的序列,足够聪明的AB两人轮流进行以下操作: 令一个大于1的数减1,然后所有数除以. 如果一个人不能操作了,那么他就输了. 输入保证所有数都是正整数并且. 分析 这是一 ...
- Java版连连看
连连看大家应该都玩过,不多说直接上一个做好的界面截图吧,所有的功能都在上面的,要做的就只是如何去实现它们了. 差不多就是这个样子.先说一下大致的思路吧.首先编写基本的界面:把什么按钮啊,表格啊什么的都 ...
- Windows10系统故障检测你知道多少-上海IT33
Windows 10作为微软公司最新的一款操作系统,从使用的方便和界面的整洁上来说,固然是很好的,但是其因为隐私问题,致使很多人不惜一切代价想要远离Windows 10这款操作系统.尽管Windows ...
- （2018干货系列一）最新Java学习路线整合
怎么学Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. 话不多说,直接上干货: ...
- python基础 数据类型 判断语句
python 类unix系统默认已经安装或使用源码包./confighuremakemake install python运行方法 通过交互式解释器 [root@room1pc01 ~]# pytho ...
- Netty的并发编程实践5：不要依赖线程优先级
当有多个线程同时运行的时候,由线程调度器来决定哪些线程运行.哪些等待以及线程切换的时间点,由于各个操作系统的线程调度器实现大相径庭,因此,依赖JDK自带的线程优先级来设置线程优先级策略的方法是错误和非 ...