`
zjl594201
  • 浏览: 24845 次
  • 性别: Icon_minigender_1
  • 来自: 南昌
社区版块
存档分类
最新评论

JavaScript获取元素在浏览器画布中的绝对位置

阅读更多
JavaScript中提供获取HTML元素位置的属性:
  HTMLElement.offsetLeft
  HTMLElement.offsetHeight
但是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,前一阵找到的一个比较好的函数,分享一下:

//获取元素的纵坐标
function getY(e){
	var offset = e.offsetTop;
	if(e.offsetParent != null) offset += getY(e.offsetParent);
	return offset;
}

//获取元素的横坐标
function getX(e){
	var offset = e.offsetLeft;
	if(e.offsetParent != null) offset += getX(e.offsetParent);
	return offset;
}


其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
分享到:
评论

相关推荐

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

    JavaScript中提供获取HTML元素位置的属性: HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对...

    使用 ML5.js 和 COCO-SSD 模型的 AI 对象检测 Web 应用程序

    JavaScript代码将这个视频流输入到COCO-SSD模型中,模型会检测视频帧中的对象,并将结果输出到画布元素中。然后,JavaScript将在画布上绘制带标签的边界框,指示对象的位置和名称。用户可以通过滑块调整每秒处理的帧...

    java版直播间源码-fracexpl:Javascript分形浏览器

    java版直播间源码fracexpl - JavaScript 分形资源管理器 该存储库是 fracexpl.js 的项目主页,这是一个设计为嵌入网页的分形浏览器。...:分形浏览器画布的宽度(以像素为单位)。 最小宽度为 640,如果未指定,则默认

    html2canvas:一个 JavaScript HTML 截图渲染器-开源

    html2canvas 是一个 JavaScript HTML 渲染器。... 但是,由于它严重依赖于浏览器,因此该库不会在 nodejs 中使用。 它无法绕过任何浏览器内容策略限制,并且要呈现跨源内容,需要代理才能将内容获取到相同的来源。

    text-metrics:针对浏览器的有效文本度量集

    使用画布为浏览器提供的轻巧高效的文本度量集,可防止布局回流。 特征 计算宽度 计算高度 计算换行符 计算最大字体大小以适合元素 安装 如果您使用的是节点,则可以运行npm install text-metrics 。 也可以通过...

    drawer

    抽屉 ...通常,情节,照片都嵌入在Web应用程序/文件中。 {drawer}可以获取这些类似于图像的元素或HTML文档的任何部分的屏幕截图,并将其发送到称为“画布”的图像编辑空间...对页面中的任何元素进行屏幕截图并在画布中进行

    从入门到精通HTML5——PDF——网盘链接

     15.1.2 使用blob接口获取文件的类型与大小 282  15.1.3 通过类型过滤选择的文件 283  15.2 使用FileReader接口读取文件 285  15.2.1 检测浏览器是否支持FileReader接口 285  15.2.2 FileReader接口的方法 ...

    bartender.js:Bartender是一个简单的零依赖性库,用于为您的网站创建可访问的画布栏。 支持多个条,它们可以位于视口的任何一侧

    已考虑以下可访问性问题: 关闭画布栏时,其子元素不可聚焦当bar打开时,其子元素是可聚焦的,并且焦点将最初设置在bar元素上(可选)将焦点捕获到打开条上关闭栏之后,焦点将返回到用于打开栏的按钮浏览器支持支持...

    Yaw:偏航使用画布和图像序列将人物变成水平可移动的场景

    偏航使用画布和图像序列将人物变成水平可移动的场景。 尝试。 浏览器支持 Evergreen浏览器和IE9。 确保为包括 。 用法 添加和 。 从添加核心样式。 添加自定义样式。 请参阅以获取灵感。 将优化的图像序列添加...

    贪吃蛇 函数封装经典案例.docx

    //空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。 //如果没有记录最高分,将最高分设置为0; if(bestScore==null...

    jslib-html5-camera-photo:JavaScript ES6 库 HTML5 相机照片

    这个包的第一个目标来自需要有一个 js 库,它可以帮助我通过浏览器从移动或桌面相机中捕捉带有 HTML5 视频和画布元素的图片。 因此,不是使用本机navigator.mediaDevices.getUserMedia()并管理stream和constraints ...

    Tcl_TK编程权威指南pdf

    获取列表元素 修改列表 搜索列表 对列表进行排序 split命令 join命令 相关章节 第6章 控制结构命令 if then else switch while foreach for break与continue catch error return 第7章 过程与作用...

    studyCanvas:Canvas学习

    canvascanvas元素用于使用JavaScript在网页上绘制图片,提供了一块画布.canvas兼容IE9以上以及主流浏览器,如果浏览器不支持canvas则可以在和中间可以看到相应内容,若支持则不可以看到标签中的内容.也通过JS来进行判断...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    本书全面讲授网页设计与制作技术、JavaScript脚本编程和Web数据库应用技术。本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    voxel-fullscreen:使用键盘快捷键切换全屏(voxel.js 插件)

    浏览器菜单全屏(查看 - 在 Chrome 中输入全屏)? 由于此插件使用 HTML5 全屏 API,因此文档会完整显示,没有任何额外的浏览器镶边(例如,选项卡)。 ... 的全屏属性? 这个插件添加了一个键绑定,并将全屏元素...

    measure-text:已淘汰

    使用画布进行内存中文本测量 已淘汰 使用代替 特征 计算文字宽度 计算最大字体大小以适合元素 安装 如果您使用的是节点,则可以运行npm install bezoerb-measure-text 。 也可以通过获得bower install measure-...

Global site tag (gtag.js) - Google Analytics