如何在 Javascript 中获取对象在页面上的绝对位置? [复制]

2023-11-24

我想在 Javascript 中获取页面上对象的绝对 x,y 位置。我怎样才能做到这一点?

I tried obj.offsetTop and obj.offsetLeft,但这些仅给出相对于父元素的位置。我想我可以循环并添加父级的偏移量及其父级的偏移量,依此类推,直到到达没有父级的对象,但似乎应该有更好的方法。谷歌搜索并没有找到太多结果,甚至网站搜索也没有找到任何东西。

另外,我无法使用 jQuery。


var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

(无耻地窃取PrototypeJS的方法;更改代码风格、变量名和返回值以保护无辜者)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Javascript 中获取对象在页面上的绝对位置? [复制] 的相关文章

  • 使用 jQuery / .data() 避免内存泄漏

    我正在使用 jQuery 动态创建 HTML 元素 现在需要针对它们存储 JavaScript 数据 但是 我现在担心内存泄漏 因为我实际上从未在对象上调用 删除 我 append 和 detach 它们 但从不 remove jQuery
  • 在 Javascript 中本地化字符串

    我目前正在使用 resx文件来管理我的 NET 服务器端资源 我正在处理的应用程序还允许开发人员将 JavaScript 插入各种事件处理程序中以进行客户端验证等 对我来说本地化 JavaScript 消息和字符串的最佳方法是什么 理想情况
  • 有没有办法监控页面上运行的 JavaScript 函数?

    有没有办法查看页面上正在执行哪些功能 如果我在页面上加载外部脚本 是否可以动态更改函数的功能或阻止其运行 HTML5 http www w3 org TR html5 scripting 1 html establish script bl
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • javascript 和 PHP 中的正则表达式有什么区别吗?

    这是在 javascript 中验证电子邮件地址的正则表达式 我不确定是否可以直接在 PHP 中使用它 a z d u00A0 uD7FF uF900 uFDCF uFDF0 uFFEF a z d u00A0 uD7FF uF900 uF
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • React/Redux bundle.js 太大

    我有一个小型的 React 项目 Webpack生成的bundle js大小为6 3Mb 如何将大小减小到 github webpack config js module exports devtool inline source map
  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 删除 Laravel Mix 中的临时文件

    我想在 laravel mix 构建期间或之后删除临时构建文件 这是我目前拥有的一些代码 但是del不工作 const mix require laravel mix const del require del compile sass i
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册
  • NodeJS:如何获取服务器的端口?

    您经常会看到 Node 的示例 hello world 代码 它创建一个 Http Server 开始侦听端口 然后执行以下操作 console log Server is listening on port 8000 但理想情况下你会想要

随机推荐

  • “RepeatedCompositeContainer”类型的对象不可 JSON 序列化

    使用 Google Client Library 与视觉库交互 我有一个从图像中检测标签的功能 GoogleVision py import os from google cloud import vision from google cl
  • HTML Canvas - 绘制弯曲箭头

    我正在尝试在 html 画布中绘制弯曲的箭头 我画一条曲线没有问题 但我不知道如何放置 gt 在线的末端 方向 ctx beginPath ctx fillStyle rgba 55 217 56 opacity ctx moveTo th
  • 是什么触发了此异常实例:“java.lang.IllegalArgumentException:观察者为空。”如何避免呢?

    返回原始版本时出现此异常ListActivity使用用户选择的项目的内容打开新活动后 它只出现在冰淇淋三明治上 这是痕迹 java lang IllegalArgumentException The observer is null at
  • 如何从 String 中获取 Date 对象

    DateFormat formatter new SimpleDateFormat MM dd yyyy HH mm ss Date d Date formatter parse dateTime System out println da
  • C++ 将字符串转换为十六进制[重复]

    这个问题在这里已经有答案了 可能的重复 C 将十六进制字符串转换为有符号整数 我已经在谷歌上搜索过 但没有找到任何帮助 所以这是我的问题 我有已经包含十六进制代码的字符串 例如 string s1 5f0066 我想将此字符串转换为十六进制
  • Tablesorter zebra 在排序之前不会条纹

    我有我的桌子 它们很棒 我可以对它们进行排序 而且效果非常好 只是在我第一次对它们进行排序之前 它们不会进行斑马条纹 我的理解是 一旦表排序器初始化 它们就会被条带化 不是这样吗 这是来自此处的 tablesorter v 2 10 最新版
  • Graphics.MeasureCharacterRanges 给出错误的尺寸计算

    我正在尝试将一些文本渲染到 Web 表单应用程序中图像的特定部分 文本将由用户输入 因此我想改变字体大小以确保它适合边界框 我的代码在概念验证实现上做得很好 但我现在正在针对设计器的资产进行尝试 这些资产更大 并且我得到了一些奇怪的结果 我
  • Edittext 行号和当前行光标位置。

    现在我正在开发一个 Android 应用程序 我创建了一个具有功能的自定义键盘 我正在使用 edittext 来显示输入的文本 编辑文本可能有 n 行 现在我的问题是我的键盘上有一个向上按钮 所以如果我单击向上按钮 那么我必须转到前几行的相
  • Flask-SQLAlchemy:SQLALCHEMY_ENGINE_OPTIONS 设置不正确

    我刚刚将我的项目 Flask SQLAlchemy 版本更新到最新版本 v2 4 由于某些 SQL Alchemy 配置参数已被弃用 我现在遵循文档并将 SQLALCHEMY ENGINE OPTIONS 作为字典添加到我的配置类中 但是
  • git 如何跨提交树将 blob 与文件进行匹配?

    Git 书的第 3 1 章明确指出只有暂存文件才能作为 blob 存储在提交树中 如果像提交对象一样 Blob 获得对其内容唯一的哈希 ID 那么 Git 如何管理跨提交跟踪 Blob 和文件之间的对应关系 不同提交中相同文件 blob 的
  • 编写“fib”并行运行:-N2 更慢?

    我正在学习 Haskell 并尝试编写并行执行的代码 但 Haskell 总是按顺序运行它 当我执行时 N2运行时标志 与省略此标志相比 执行需要更多时间 这是代码 import Control Parallel import Contro
  • 在本地计算机上创建 Sql Server 备份

    我正在使用在本地计算机上运行的 SQL Server Management Studio 我可以登录到远程盒子 数据库引擎 并使用 Studio 创建数据库备份 并将其保存到远程设备上的驱动器中 如何将备份保存到本地计算机上的驱动器上 Se
  • 如何在 PHP 中将两个字符串组合在一起?

    我实际上不知道如何描述我想要的 但我会告诉你 例如 data1 the color is data2 red 我应该做什么 或处理 所以 result 是以下组合 data1 and data2 期望的结果 result the color
  • Rails 5 - Turbolinks 5,一些 JS 未在页面渲染上加载

    我有一个 Rails 应用程序 最近更新为5 0 0 RC1 大部分过渡都很顺利 但我在使用新的 Turbolinks 时遇到了一些麻烦 例如 在我的应用程序中 我使用这个 gem gem chosen rails My applicati
  • 审计日志策略

    我正在尝试确定应用程序中审计日志记录的最佳方法 日志的主要原因是报告事件 更改 的顺序 我有一个对象层次结构 当该层次结构的任何部分发生变化时 我需要在稍后的日期创建报告 我认为我有三个选择 每个表都有一个日志 因此匹配对象的层次结构 然后
  • 为什么我们需要 Java 中的接口?

    在Java中 我们使用接口来实现多重继承 这是接口的唯一用途吗 如果是的话 Java中接口的主要用途是什么 为什么我们需要 Java 中的接口 我想说主要用途是多态性 或者对多个不同对象执行相同操作的能力 例如 如果不同的对象都实现相同的接
  • 如何知道字符串的大小(以字节为单位)?

    我想知道我是否可以知道一个字节有多长string在C 中 有人知道吗 您可以使用 ASCII 等编码来获取每个字节的字符System Text Encoding class 或者试试这个 System Text ASCIIEncoding
  • 使用 ggplot 绘制 SpatialPolygonDataFrame

    我有一个大伦敦地区的形状文件 我用readShapePoly函数从maptools包将其加载到 R 中作为SpatialPolygonDataFrame 我想绘制这些多边形 我已经通过使用基本功能完成了plotR 中的函数 输出如下图所示
  • VS2005 Winforms Designer异常屏幕和IE8

    自从我安装了 Internet Explorer V8 以来 我的 Winforms Designer 异常屏幕 WSOD 似乎已损坏 之前我会得到带有描述的错误的红色文本 今天我得到这个 WSOD 损坏 http faxt com ima
  • 如何在 Javascript 中获取对象在页面上的绝对位置? [复制]

    这个问题在这里已经有答案了 我想在 Javascript 中获取页面上对象的绝对 x y 位置 我怎样才能做到这一点 I tried obj offsetTop and obj offsetLeft 但这些仅给出相对于父元素的位置 我想我可