原生js获取left值和top值
2024-10-11 09:32:25
在用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>
最新文章
- java 上传图片
- KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序
- hdu 2018 母牛的故事
- java中for循环的6种写法
- C# 基础概念之延迟加载
- HDU 3397 Sequence operation(线段树)
- 每天一个JavaScript实例-动态省份选择城市
- Xcode如何简单安装Alcatraz
- 在JS中使用COM组件的方法
- 隐藏Easy UI 中parent.$.modalDialog 的button
- jQuery对象与DOM对象互相转换
- 自动删除Android工程中无用的资源
- 《JAVA程序设计》第五周总结
- js时间戳如何转时间
- flowable 的ProcessEngine配置
- Laravel Tinker 使用笔记
- 使用 git push 出现error setting certificate verify locations问题记录
- hosts.allow hosts.deny
- Xcode 5: 将新项目同步到Svn上
- centos7 安装 openvswitch