`
wysheng2912
  • 浏览: 12411 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js获得页面中的绝对位置

阅读更多
TextRectangle对象,对getClientRects和getBoundingClientRect可以得到一个更好的说明.

getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象。

浏览器差异:
除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,
firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。

使用场景:
现 在用得最多的是getBoundingClientRect,这个直接返回一个TextRectangle,其实大家经常使用它来获取到一个 element的viewport坐标.其实就算dom里面没有文本也能返回一个 TextRectangle. 这样就不需要向上遍历来计算对象的相对坐标了。


如果不支持getBoundingClientRect可用下列方法获得
取得页面上元素的绝对位置x y
function getX(obj){  
        return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);  
    }          
    function getY(obj){  
        return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);  
    }
分享到:
评论

相关推荐

    JavaScript和jQuery获取input框的绝对位置

    在JavaScript中,我们可以使用`getBoundingClientRect()`方法来获取元素的绝对位置。这个方法返回一个对象,其中包含了`top`, `right`, `bottom`, `left`, `width` 和 `height`等属性,它们分别表示元素相对视口边界...

    前端读取JS绝对目录的方法

    本文将详细探讨如何在JavaScript中获取当前脚本的绝对路径,并结合相关标签"js引用"来深入理解这个过程。 首先,我们要明白在浏览器环境中,JavaScript无法直接访问文件系统,因此不能像服务器端语言那样获取文件的...

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

    在JavaScript中,获取DOM元素的绝对位置是一项常见的需求,特别是在实现动态效果如页面滚动和动画时。例如,创建像本文例中的左侧悬浮导航,需要精确地掌握元素在页面中的位置,以便在滚动过程中保持其固定位置。...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    获取鼠标在页面上的位置(包括滚动条)

    在网页开发过程中,有时候我们需要获取用户鼠标在页面上的具体位置,特别是当页面存在滚动条时,这将有助于实现某些交互功能,如动态提示、点击反馈等。本文将详细介绍如何通过JavaScript来获取鼠标在页面上的位置,...

    javascript 获取鼠标的绝对位置 event

    在JavaScript中,获取鼠标的绝对位置是常见的需求,特别是在实现交互式用户界面或者进行鼠标跟踪时。`event`对象是JavaScript中的一个内置对象,它包含了有关当前事件(如鼠标点击或移动)的各种信息,其中包括鼠标...

    JavaScript获取对象在页面中位置坐标的方法

    在JavaScript中,获取页面元素的位置坐标是Web开发中常见的需求,这主要涉及到DOM(文档对象模型)的操作。本文将详细讲解如何使用JavaScript的内置属性和方法来获取对象在页面中的位置坐标。 首先,我们需要理解两...

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

    总结来说,jQuery提供的`offset()`和`position()`方法能够方便地获取元素的绝对位置和相对位置,从而满足开发中对页面布局管理的需求。开发者可以根据实际情况选择合适的方法,以准确获取和处理元素的位置信息。

    JavaScript取得鼠标绝对位置程序代码介绍

    在JavaScript中,获取鼠标在页面上的绝对位置是一项常见的需求,这有助于实现如拖放功能、鼠标跟随效果等交互式功能。本文将详细介绍如何在不同浏览器环境下通过JavaScript获取鼠标绝对位置的方法。 首先,我们需要...

    JavaScript获取网页表单action属性的方法

    JavaScript获取网页表单的action属性是一种常用的操作,通常用于获取表单提交时要发送到的URL地址。在Web开发中,表单是用来收集用户输入数据并将其发送到服务器的HTML元素。action属性指定了表单提交后,服务器处理...

    js获得对象的x,y位置函数

    在JavaScript编程领域,获取DOM元素(Document Object Model,文档对象模型)在页面中的绝对位置是一项常见且实用的技术。本文将详细解析如何通过自定义函数`findPosX`和`findPosY`来实现这一功能,帮助开发者准确...

    JavaScript控制网页平滑滚动到指定元素位置的方法

    在提供的代码中,`elementPosition` 函数用于获取元素相对于视口的绝对位置。它通过遍历元素的 `offsetParent` 属性来累加元素的 `offsetLeft` 和 `offsetTop`,从而得到元素的坐标。这是一个非常基础且实用的功能,...

    原生js随机位置出现笑脸图片代码.zip

    这个"原生js随机位置出现笑脸图片代码"就是一个很好的实例,它利用JavaScript(JS)的原生功能实现了一个功能,即在页面上随机显示笑脸图片。这个功能通常被用于增加页面的趣味性和吸引力,比如作为欢迎界面或者游戏...

    js获取元素在浏览器中的绝对位置

    在JavaScript中,获取元素在浏览器中的绝对位置是一个常见的需求,特别是在进行页面交互或者布局计算时。这个过程涉及到对HTML元素的定位属性的理解以及如何通过这些属性来递归地计算元素的位置。 首先,...

    DOM元素的绝对位置

    在这个函数中,`getBoundingClientRect()`方法提供了元素相对于视口的边界信息,然后加上当前页面的滚动偏移,从而得到元素的绝对位置。这个函数可以在任何有DOM元素引用的上下文中使用,无论元素的定位方式如何。 ...

    用Javascript 获取页面元素的位置的代码

    在制作网页的过程中,我们经常需要精确知道某个元素在页面中的位置,这在进行布局调整、响应式设计或添加交互元素时尤为重要。JavaScript 提供了丰富的属性和方法来帮助我们获取页面元素的位置信息。这些信息可以...

    绝对路径和相对路径

    ##### 3.2 Servlet中获得当前应用的相对路径和绝对路径 - **根目录所对应的绝对路径**:通过`request.getServletPath()`获取。 - **文件的绝对路径**:通过`request.getSession().getServletContext().getRealPath...

    JS获取input file绝对路径的方法(推荐)

    传统的HTML中,`<input type="file">` 元素可以用来让用户选择文件,但是出于安全考虑,浏览器出于安全考虑,不允许网页通过JavaScript直接获取用户本地文件系统的绝对路径。这是因为直接访问本地文件系统可能会引发...

    jQuery获取页面元素绝对与相对位置的方法

    在JavaScript的众多库中,jQuery作为一个广泛使用的库,提供了简单易用的API来帮助开发者获取页面元素的绝对位置和相对位置。本文将详细介绍jQuery中用于获取元素位置的方法,包括offset()和position(),以及如何...

    setAbsolute.js:获取一个元素或节点列表并将它们的位置更改为绝对位置,同时将它们保持在当前位置

    所有元素现在都被设置为绝对的并且应该在它们相同的位置 请注意,这会删除边距 - 这是因为如果保留边距并且元素被绝对定位,则位置将被边距偏移。 麻省理工学院许可证 (MIT) 版权所有 (c) 特此授予任何人免费...

Global site tag (gtag.js) - Google Analytics