`
DBear
  • 浏览: 231052 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

如何获取一个dom元素的绝对位置

 
阅读更多

   应用场景:鼠标滑过某元素时,需要弹出一个信息标签,标签的位置要根据滑过元素的位置而定。

 

   难点:目标元素并不一定是absolute的,因此不能简单的通过top,left这种属性获取。元素可能包裹在n个父元素内,需要把这些因素都考虑进去。

 

  解决思路:先获取该元素的offsetLeft和offsetTop,然后取它的offsetParent,并向外循环,累加这些left和top,最后得到的就是元素的绝对位置。

 

  代码:

var obj = xxx; //这个元素就是目标元素,你可以用任何方式将它传入。

var w = obj.offsetWidth, h = obj.offsetHeight;

//从目标元素开始向外遍历,累加top和left值
for (var t = obj.offsetTop, l = obj.offsetLeft; obj = obj.offsetParent;) {
    	t += obj.offsetTop;
        l += obj.offsetLeft;
}
    
 

 

 

 

分享到:
评论

相关推荐

    获取元素绝对位置 position

    "获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,并参考提供的博客链接以及相关的HTML文件。 首先,元素的绝对位置是指元素左上角相...

    JS中获取 DOM 元素的绝对位置实例详解

    下面我们将详细介绍几种获取DOM元素绝对位置的方法及其兼容性。 1. `offsetTop` 和 `offsetLeft` `HTMLElement.offsetTop` 和 `HTMLElement.offsetLeft` 属性分别用于获取元素相对于其定位容器(positioning ...

    DOM元素的绝对位置

    下面是一个JavaScript函数示例,用于获取DOM元素的绝对位置: ```javascript function getAbsolutePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || ...

    Javascript dom位置、大小、鼠标定位操作

    【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分,JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...

    jQuery 实现DOM元素拖拽交换位置的实例代码

    在代码中,会涉及到如何获取元素索引、如何存储和更新元素位置、如何触发 DOM 的重新渲染等操作。 #### 5. 最佳实践和注意事项 最佳实践包括代码的模块化、事件的合理解绑、性能优化(减少 DOM 操作、使用事件委托...

    获取dom元素那些讨厌的位置封装代码

    获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大...

    jsx-dom:使用JSX创建DOM元素

    使用JSX创建DOM元素。 支持ES模块和TypeScript。 安装 npm install --save jsx-dom yarn install jsx-dom 用法 注意: jsx-dom仅是ESM。 如果您绝对需要CommonJS支持,请改用jsx-dom-cjs 。 注意:如果您使用的是 ...

    jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

    在Web开发中,获取页面元素的位置是一个常见的需求,它可以帮助开发者进行DOM操作,实现元素间的定位、布局调整等功能。使用jQuery库时,我们可以利用其提供的方法来获取元素的绝对和相对位置,这些位置通常用元素...

    尚硅谷_教学课件_JavaScriptDOM

    首先,DOM(Document Object Model)是一种标准,它将网页内容表示为一个层级结构,每个部分都成为一个节点,如元素节点、文本节点、属性节点等。DOM提供了API,让开发者可以找到、修改、添加或删除这些节点,从而...

    xml文件dom操作详解

    上述代码首先通过`getElementsByTagName`获取所有`<book>`元素,然后遍历第一个`<book>`的子节点,查找名为`<year>`的节点,最后获取其文本内容。 DOM提供了多种节点操作方法: - `Node.getBaseURI()`:返回节点的...

    dom4j---xml解析jar包

    **DOM4J——XML解析库详解** XML(eXtensible Markup Language)作为一种标记语言,广泛应用于数据交换、配置文件和文档存储等领域。...如果你正在寻找一个强大的XML处理工具,DOM4J绝对值得尝试。

    jquery获取html元素的绝对位置和相对位置的方法

    总之,jQuery提供了强大的DOM操作和事件处理能力,其中获取元素位置的功能对于开发动态、交互式的Web应用非常关键。通过`.offset()`和`.position()`,你可以轻松获取元素的绝对位置和相对位置,结合CSS定位策略,...

Global site tag (gtag.js) - Google Analytics