当前位置:首页 > 日记 > 正文

原生js获取left值和top值的三种方法

原生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属性值。

以上这篇原生js获取left值和top值的三种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

浅谈JavaScript中的属性:如何遍历

浅谈JavaScript中的属性:如何遍历

属性,遍历,浅谈,电脑软件,JavaScript,在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单。这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上…

Photoshop 玻璃图标按钮

Photoshop 玻璃图标按钮

图标,玻璃,电脑软件,按钮,按钮图标,最终效果图1、新建文档,使用圆角矩形工具Alt键绘制一个圆角正方形,然后使用渐变工具设置下面两种颜色进行填充,该图层命名为:icon-bg ,效果如下图: 2、复制图层,命名为glass,改变填充为白色填充,透明度为50%,使用矩…

PS CS5怎么制作个性的课程表?

PS CS5怎么制作个性的课程表?

课程表,个性,电脑软件,PS,新的学期才刚开始,又有新的课程了,那么怎么用photoshop做一个带有背景的有自己特色的课程表呢?软件名称:Photoshop CS5 绿色版官方中文正式原版软件大小:104.06MB更新时间:2014-06-011、首先打开excel,建立一个课程表。因…

利用js编写网页进度条效果

利用js编写网页进度条效果

网页,进度条,效果,电脑软件,js,一、基本思路为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为”Loading”。该函数接收2个参数,分别为arr、callback。其中arr定义图片数组,call…

js鼠标跟随运动效果

js鼠标跟随运动效果

鼠标,运动,效果,电脑软件,js,本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下1、使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span2、给span标签添加字段3、设置基本的样式cursorPlay的宽度 9…

如何修改Excel2007自选图形中的文

如何修改Excel2007自选图形中的文

文字,图形,修改,格式,电脑软件,  给Excel2007中的自选图形添加文字,可能有些朋友还不太懂。在Excel中,输入进去的字怎么修改格式,其实这些都有不难。以下是小编为您带来的关于修改Excel2007自选图形中的文字格式,希望对您有所帮助。修改Excel…

excel2007资源不足解决方法excel资

excel2007资源不足解决方法excel资

解决方法,电脑软件,excel,strong,Excel,  在Excel 2007中,对于表格较大的文件,在多次调用的过程中,会出现以下问题“可用资源不足,EXCEL无法完成此任务,请少选择一些数据或关闭其他应用程序”,今天,小编就教大家如何对资源不足的解决…

Photoshop合成简约大气温馨的家居

Photoshop合成简约大气温馨的家居

家居,简约,大气,海报,温馨,本教程主要使用Photoshop合成简约温馨的家居主题海报,制作主题海报是一项综合工程,首先要对客户的建议进行深入分析,找准思路;然后画出稿图;再搜集所需的素材进行溶图即可。喜欢的朋友让我们一起来学习吧。最终效果画…

分享一道关于闭包、bind和this的面

分享一道关于闭包、bind和this的面

闭包,分享,面试题,电脑软件,bind,要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index<ul id="text"> <li>这是第一个li</li> <li>这是第二个li</li> <li>这是第三个li</li></ul>解答一:bind,将当前匿名函数指向this,将…

如何将PPT字母设计成霓虹灯效果

如何将PPT字母设计成霓虹灯效果

霓虹灯,字母,效果,如何将,电脑软件,  PPT的字体可以设计很多种效果,同样,我们也可以给字母设计一些好看的效果出来。以下是小编为您带来的关于将PPT字母设计成霓虹灯效果,希望对您有所帮助。将PPT字母设计成霓虹灯效果具体操作如下:先设置PPT…

浅谈键盘上回车按钮的js触发事件

浅谈键盘上回车按钮的js触发事件

事件,键盘,浅谈,按钮,电脑软件,input 的回车触发事件。简单,就当做个笔记咯。$("#querySearcher").live("keyup", function (e) { if (e.keyCode == 13) { xxxxxx(); } });以上这篇浅谈键盘上回车按钮的js触发事件就是小编…

ppt2010怎么打包ppt2010文稿打包的

ppt2010怎么打包ppt2010文稿打包的

步骤,方法,教程,文稿,电脑软件,  所谓打包,指的就是将独立的已综合起来共同使用的单个或多个文件,集成在一起,生成一种独立于运行环境的文件。将PPT打包能解决运行环境的限制和文件损坏或无法调用的不可预料的问题,那么下面小编就教你ppt2010…