转自:http://tianke66.iteye.com/blog/340100
获取页面某一元素的绝对X,Y坐标,可以用offset()方法:
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对(父元素)位置:
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
注: 通过getBoundingClientRect方法获取对象位置,包含: left
, top
, right
, bottom
4个参数值。
Firefox:
element.getBoundingClientRect
Summary
Returns a text rectangle object that encloses a group of text rectangles.
Syntax
var rectObject
= object
.getBoundingClientRect();
Returns
The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects()
for the element, i.e., the CSS border-boxes associated with the element.
The returned value is a TextRectangle object, which contains read-only left
, top
, right
and bottom
properties describing the border-box, in pixels, with the top-left
relative to the top-left of the viewport , unless the element is inside
an SVG foreignobject
element, in which case the top-left is relative to the nearest foreignobject
ancestor and in the coordinate system of that foreignobject
.
IE
Retrieves an object that specifies the bounds of a collection of TextRectangle
objects.
Syntax
oRect
= object
.getBoundingClientRect(
)
Return Value
Returns a TextRectangle
object. Each rectangle has four integer
properties (top
, left
, right
, and bottom
) that represent a coordinate of the
rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom
coordinates of the union of rectangles relative to the client's upper-left
corner. In Microsoft® Internet Explorer 5, the window's upper-left is at 2,2
(pixels) with respect to the true client.
分享到:
相关推荐
### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作,提供了强大的选择器和事件处理机制。在获取鼠标坐标时,主要依赖于`mousemove`事件和`originalEvent`对象。当鼠标在元素上移动时,触发`...
### jQuery 获取控件的坐标位置 #### 知识点概览 在网页开发过程中,经常需要获取页面元素的坐标位置,以便实现特定的功能,如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细...
首先,我们来看一下如何使用JQuery获取浏览器的尺寸。这些尺寸包括浏览器窗口的可视区域、文档的高度和宽度以及文档body的高度和宽度等。 1. **浏览器窗口可视区域高度**: ```javascript $(window).height(); `...
在JavaScript和jQuery的世界里,获取元素的绝对位置是一项常见的任务,尤其当涉及到动态布局或交互设计时。这个主题主要集中在如何获取HTML中的`input`框的精确位置,以便于进行定位或其他操作。以下是对这个知识点...
<title>jQuery获取百度经纬度 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=YOUR_BAIDU_API_KEY"></script> $(function(){ ...
函数返回坐标对象,然后`run`函数通过`com.whuang.hsj.$$id`获取用于显示结果的div,并将返回的坐标信息更新到这个div的`innerHTML`中。 通过这种方式,开发者可以在页面上直观地看到div元素的各种坐标信息。这对于...
在JavaScript和jQuery中,获取当前鼠标的X、Y坐标位置是一项常见的需求,特别是在实现交互式功能或跟踪用户鼠标活动时。下面将详细讲解如何在两种环境下实现这一功能。 ### JavaScript 获取鼠标坐标 在纯...
首先,我们可以使用`event`对象来获取鼠标在页面上的位置。在IE中,`event.clientX`和`event.clientY`分别返回鼠标相对于浏览器窗口客户区(不包含滚动条和边框)的水平和垂直坐标。同样,`event.screenX`和`event....
以下是使用jQuery获取鼠标坐标的代码示例: ```javascript $(function() { $("#t").mouseover(function(event) { event = event || window.event; var x = event.offsetX || event.originalEvent.layerX; var y...
此方法返回一个包含所有标注信息的对象数组,每个对象包含了`x`、`y`坐标,`width`、`height`尺寸,以及其他可能的属性如形状类型。这些信息可以用于进一步的处理,如保存标注结果或进行其他计算。 此外,jQuery ...
在实际应用中,如果需要获取更精确的地理位置信息,则可能需要利用HTML5 Geolocation API来获取经纬度坐标,然后通过地图服务API如Google Maps API来进行地址解析。 总结来说,本文档所提供的jQuery示例展示了如何...
标签“源码”可能暗示博客提供了具体的代码示例,而“工具”可能意味着作者讨论了一些辅助工具或库,如jQuery或其他前端框架,它们可能简化了获取鼠标坐标的过程。 在没有具体博客内容的情况下,我们无法深入到更...
本文将详细介绍如何基于jQuery框架开发一个用于获取鼠标坐标的插件。首先,本文提供的代码示例是在2010年由刘建华开发,并被作为开源资源进行分享,允许开发者在遵循其版权声明的情况下自由使用和修改代码。该插件的...
jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click...
首先,我们来了解一下如何通过jQuery获取页面元素的绝对位置。绝对位置指的是元素相对于整个文档左上角(通常是指标签)的位置。jQuery提供了一个非常方便的方法叫做`offset()`,它可以返回元素相对于文档的偏移量。...
本文将深入探讨如何利用腾讯地图服务来搜索地址并获取其对应的坐标,适用于初学者的学习与交流。 首先,我们要了解的是“腾讯地图搜索地址获取坐标”的基本原理。这是通过调用腾讯地图API中的地理编码(Geocoding)...
JQuery 提供了方便的方法来获取元素的绝对位置和相对位置坐标。这里我们将详细探讨 `offset()` 和 `position()` 这两个方法,以及如何在实际应用中使用它们。 1. `offset()` 方法: `offset()` 方法用于获取匹配...
3. **jQuery与SVG/Canvas结合**:jQuery可以与SVG或Canvas元素无缝集成,通过选择器获取元素并进行操作。例如,你可以使用`$("svg path")`选择SVG路径元素,并应用jQuery方法修改其属性。 4. **区域标记**:在平面...
在这个例子中,`item` 对象代表被拖动的元素,`position` 包含了元素的新坐标信息,如 `x` 和 `y` 坐标。 ### 5. 扩展应用与优化 - **数据绑定**:通常,我们不仅需要改变网格的视觉布局,还需要同步这些变化到...