`

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

 
阅读更多

avaScript中提供获取HTML元素位置的属性: 

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

//获取元素的纵坐标 

 

function getTop(e){  
var offset=e.offsetTop;  
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);  
return offset;  
}  
 

//获取元素的横坐标 

function getLeft(e){  
var offset=e.offsetLeft;  
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);  
return offset;  
}  

 

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

 

 

分享到:
评论

相关推荐

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

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

    javascript新年倒计时雪花代码,可用在新年倒计时,雪花效果逼真,兼容主流浏览器

    因此,为了部署这个新年倒计时雪花代码,你需要按照readme.md的指示进行操作,这可能包括引入相关的JavaScript和CSS文件,设置倒计时的结束日期,以及在页面中指定展示倒计时和雪花效果的元素。 总的来说,通过...

    使用html+CSS实现流星雨特效,可以直接在编辑器中运行或者在浏览器中打开,十分的炫酷

    在这个JavaScript代码中,我们首先获取`canvas`元素并创建2D渲染上下文。接着,我们定义流星的数据结构,并创建函数来生成新的流星、绘制所有流星以及更新它们的位置。`requestAnimationFrame`函数用于创建动画循环...

    画布工具包解压即可.rar

    2. 选择要截图的区域:你可以通过JavaScript获取用户选择的网页区域,例如通过鼠标拖拽或者指定DOM元素。 3. 调用`html2canvas`:传入要截图的DOM元素,`html2canvas`会遍历该元素及其所有子元素,并尝试将它们渲染...

    获取鼠标相对位置

    这时,我们可以使用`getBoundingClientRect()`方法来获取元素的几何信息,然后结合`event.clientX`和`event.clientY`计算出相对位置: ```javascript document.getElementById('myElement').addEventListener('...

    js canvas画布实现截图并且提供下载图片功能

    然后,我们可以通过JavaScript获取这个`canvas`元素,并在其上进行绘图。例如,我们可以用`fillRect`方法画一个矩形: ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....

    网络画布.rar web前端练习

    在Canvas中,我们主要用JavaScript来操作Canvas元素,通过调用其提供的方法绘制图形。例如,`canvas.getContext('2d')`获取2D渲染上下文,然后可以使用`fillRect()`绘制矩形,`beginPath()`开始路径,`moveTo()`和`...

    浏览器的工作原理-现代网络浏览器幕后揭秘

    CSS2可视化模型定义了如何在页面上绘制元素,包括画布模型、CSS框模型、定位方案等。框类型和定位指定了元素的具体呈现方式,如相对定位、浮动定位、绝对定位和固定定位等。分层展示是高级功能,允许浏览器优化渲染...

    blu:第一次尝试使用 HTML5 画布和 javascript 的浏览器游戏

    在浏览器游戏中,JavaScript 负责逻辑处理、事件响应和时间管理。例如,游戏的碰撞检测、角色移动、得分计算等功能都由 JavaScript 实现。开发者可能会使用定时器(`setInterval` 或 `requestAnimationFrame`)来...

    bpmnjs在浏览器中查看和编辑BPMN20图表

    2. **初始化**:在JavaScript代码中实例化bpmn-js,提供必要的配置,如画布大小、模型数据等。 3. **加载模型**:将BPMN模型数据加载到bpmn-js实例中,可以是XML或JSON格式。 4. **事件监听**:订阅bpmn-js提供的...

    javascript将svg转图片代码组件,亲测有效;

    7. **导出图片**:现在,我们可以从画布中获取位图数据,并将其转换为所需的图片格式(如PNG或JPEG)。使用`canvas.toDataURL()`方法,可以获取一个包含图像数据的URL,然后可以创建一个`a`标签下载或通过`...

    浏览器js手写汉字

    "浏览器js手写汉字"这个主题涉及到的是如何利用JavaScript技术在浏览器环境中实现手写汉字的功能,同时考虑到跨浏览器兼容性,包括对Internet Explorer(IE)、Mozilla Firefox、Google Chrome以及360浏览器的支持。...

    JavaScript图片切割代码

    `canvas`是JavaScript绘图的核心,它提供了一个画布,可以在上面绘制和操作图像。 2. **CSS样式**:为了使图片切割功能可视化,需要设置`<canvas>`的样式,如宽高、位置等,使其覆盖在图片上方,但保持透明,以便...

    Node.js-一个基于node用于在linux终端上创建画布的命令行应用

    **Node.js** 是一个强大的JavaScript运行环境,它允许开发者在服务器端执行JavaScript代码,而不仅仅局限于浏览器端。这个环境基于Google的V8引擎,提供了高效、高性能的代码执行能力。在给定的标题中,我们关注的是...

    html5画布操作

    在实际应用中,Canvas元素的位置和样式可以使用CSS进行控制。 画布的2D渲染上下文是进行绘图的核心,它提供了一系列API方法,用于绘制线条、形状、文本、图片等。要获取到这个上下文,可以使用JavaScript中的`...

    将svg画布内容转成canvas,转换成png图片下载

    在前端开发中,有时我们需要将SVG(可缩放矢量图形)内容转换为Canvas,然后进一步将其导出为PNG(Portable Network Graphics)图像。这样的需求通常出现在需要在不支持SVG的浏览器(如早期版本的IE)中显示矢量图,...

    鼠标在canvas上悬浮,并提示鼠标位置信息

    在HTML5中,Canvas是一个非常重要的元素,它提供了一个基于矢量图形的画布,开发者可以使用JavaScript来绘制和操作图像。"鼠标在canvas上悬浮,并提示鼠标位置信息"这个主题涉及到了Canvas与事件处理、坐标系统以及...

    javascript获得鼠标的坐标值

    在浏览器环境中,JavaScript可以访问`event`对象,它包含了与用户交互相关的各种信息,包括鼠标的当前位置。当用户在页面上移动鼠标时,可以监听`mousemove`事件来获取鼠标的坐标。以下是一个简单的实现: ```...

    浏览器摄像头拍照并裁剪上传.rar

    在现代Web应用中,利用浏览器调用用户的摄像头进行拍照、裁剪并上传的功能变得越来越常见。这个名为"浏览器摄像头拍照并裁剪上传.rar"的压缩包包含了一个实现此类功能的简单示例。在这个项目中,主要涉及以下几个...

    Javascript贪吃蛇

    JavaScript贪吃蛇是一款基于网页的经典游戏,通过JavaScript编程语言实现,展现了JavaScript在游戏开发中的应用。这款游戏的原理是利用HTML作为展示界面,JavaScript处理游戏逻辑和用户交互,为玩家提供了一个简单但...

Global site tag (gtag.js) - Google Analytics