`

jquery获取对象坐标

    博客分类:
  • web
阅读更多

转自: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

getBoundingClientRect Method

Internet Development Index

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事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click...

    yxdYXD11123123#Frontend-Road#jQuery获取元素位置+尺寸1

    获取/设置标签的位置offset()相对于页面左上角的坐标注意:此方法只对可见元素有效参数带有 top 和 left 属性的对象获取匹配元素不包括边框,包括内边

    超实用的jQuery代码段

    1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...

    jquery中获得元素尺寸和坐标的方法整理

    (即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计。 此方法只对可见元素有效。 2.position() position() 方法返回匹配元素相对于父元素的位置(偏移)。(相对于父元素的文档坐标) 该方法...

    JavaScript与JQUERY获取元素的宽、高和位置

    ele.getBoundingClientRect():获取一个元素相对于浏览器视口的的坐标(无论父元素定位与否),返回一个Object对象,该对象有6个属性:top/left/right/bottom/width/height。几乎所有浏览器都支持该方法。jQuery中...

    Web前端开发技术-Jquery的尺寸和位置操作.pptx

    offset()方法:使用offset()方法可以获取元素的位置,返回的是一个对象,包含left和top属性,表示相对于文档的偏移坐标,和父级元素没有关系。;案例演示:;案例实现:;案例实现:获取元素的位置;position()方法:...

    jquery获得页面元素的坐标值实现思路及代码

    jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入框,feedBackMessage函数见... ——————- 1,获取对象(自定义调整打开新窗口参照元素) var obj = $(“#oButton”); 实例中我获取的对象是弹出窗口

    html5的canvas封装displayer.js.zip

    它参照flash显示对象(sprite)而设计,支持局部坐标系统,以及坐标系统间的转换,这样便可以进行精确的图形处理。同时支持局部图形数据的获取(同域条件下),以及本地保存。它支持事件系统,可以为任何displayer...

    Highcharts-8.1.2.zip

    结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 支持多坐标轴 多个数据进行对比这是非常常见的需求,Highcharts 可以让你为每个类型的数据添加...

    weather-dashboard

    然后,通过将数据从API对象中拉出,使用jQuery将数据显示在屏幕上。 输入的城市将保存到本地存储中,每次重新加载页面时,该存储都会在搜索栏下方的按钮中显示以前查找过的城市。 您可以单击这些按钮再次显示城市的...

    Highcharts-Gantt-8.1.2.zip

    结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    Google-Maps-Filter

    所需要的只是地理坐标和一些要过滤的属性。 地图还将自动缩放和平移以适合当前显示的位置。 它可以通过修改config对象和 CSS 类轻松定制。 用普通的 Javascript 加上一点 jQuery 编写。 例如,我们有 JSON 数据...

    Highcharts-Stock-8.1.2.zip

    结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。 范围选择器 在处理大数据集时,我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择...

    智能发票识别系统后台.zip

    根据模板中信息区域坐标截取ROI,因为票据可能存在套打情况,故还使用了约束式ROI搜索算法对信息区域进行重定位。 对每个ROI进行去噪、去印章、去直线等预处理操作,并使用形态学处理得到目标文本信息的连通体的最小...

    JAVA上百实例源码以及开源项目

    Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标,Y...

    JAVA上百实例源码以及开源项目源代码

    Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个...

    autoJS1688示例.zip

    click控件获取坐标位置.js ColorMatrix处理图片↘颜色矩阵.js ColorMatrix颜色矩阵的用法.js common(1).js common.js config.js DailyTask.js DensityUtil.js didi.js digit.js dou_yin_yang_hao(1).js ...

Global site tag (gtag.js) - Google Analytics