取得元素的左和上偏移量的方法

 更新时间:2014年09月17日 16:01:51   投稿:whsnow  
利用offsetParent属性在Dom层次中逐级向上回溯,将每个层次偏移量合计,需要的朋友可以参考下
 function getElementLeft(element) 
{ 
var actualLeft = element.offsetLeft; 
var current = element.offsetParent; 

while (current!==null) 
{ 
actualLeft += current.offsetLeft; 
current = current.offsetParent; 
} 
return actualLeft; 
}

取得元素的左偏移量;

function getElementTop(element) 
{ 
var actualTop = element.offsetTop; 
var current = element.offsetParent; 

while (current!==null) 
{ 
<span style="white-space:pre"> </span>actualTop += current.offsetTop; 
current = current.offsetParent; 
} 
return actualTop; 
}

取得元素的上偏移量;

利用offsetParent属性在Dom层次中逐级向上回溯,将每个层次偏移量合计。

相关文章

  • webpack自动打包和热更新的实现方法

    webpack自动打包和热更新的实现方法

    这篇文章主要介绍了webpack自动打包和热更新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • uni-app使用微信小程序云函数的步骤示例

    uni-app使用微信小程序云函数的步骤示例

    这篇文章主要介绍了uni-app使用微信小程序云函数的步骤示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 2016年最热门的15 款代码语法高亮工具,美化你的代码

    2016年最热门的15 款代码语法高亮工具,美化你的代码

    无论是代码高亮还是语法高亮对整个程序来说都非常重要,可以给人眼前一亮的感觉,增加用户体验度,下面通过本文给大家介绍2016年最热门的Javascript代码高亮显示脚本及代码语法高亮工具,对js代码高亮,代码语法高亮相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • 基于JavaScript制作霓虹灯文字 代码 特效

    基于JavaScript制作霓虹灯文字 代码 特效

    这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字,也可以叫他文字变色效果,下面跟着小编一起学习JavaScript制作霓虹灯文字 代码特效,需要的朋友一起学习吧
    2015-09-09
  • JavaScript 动态创建VML的方法

    JavaScript 动态创建VML的方法

    JavaScript 动态创建VML的方法,需要的朋友可以参考下。
    2009-10-10
  • TypeScript中的混合(Mixin)示例详解

    TypeScript中的混合(Mixin)示例详解

    由于TypeScrip中的类不支持多继承,所以引入了混合(Mixin)的特性,可以间接实现多继承的效果,这篇文章主要介绍了一文弄懂TypeScript中的混合(Mixin),需要的朋友可以参考下
    2023-09-09
  • 分别用两个函数实现的菜单

    分别用两个函数实现的菜单

    分别用两个函数实现的菜单...
    2007-05-05
  • javascript replace()正则替换实现代码

    javascript replace()正则替换实现代码

    javascript-replace()基础,一次完成将"<,>"替换"&lt;&gt;"实例
    2010-02-02
  • 基于JavaScript实现本地图片预览

    基于JavaScript实现本地图片预览

    这篇文章主要为大家详细介绍了基于JavaScript实现本地图片预览的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript中alert的使用方法超详细介绍

    JavaScript中alert的使用方法超详细介绍

    JS中的alert作用是在浏览器中弹出一个警告框,而使用alert有三种方式,不同的方式所呈现的效果也不相同,这篇文章主要给大家介绍了关于JavaScript中alert使用方法的相关资料,需要的朋友可以参考下
    2024-01-01

最新评论