JQuery

1个成员

jquery获取页面元素位置实例

发表于 2017-01-30 2563 次查看
在jquery 中提供了大量的获取元素位置方法,如果我们有position,offset等方法,下面我来给各位朋友介绍页面元素位置获取方法实例。

 

jquery获取元素位置的方法有两个:

position方法:

获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。使用:

 代码如下 复制代码

$("#target").position().left;

$("#target").position().top;

offset方法:

获取匹配元素集中第一个元素的坐标,获取的是该元素相对于document对象的偏移位置。

使用:

 代码如下 复制代码

$("#target").offset().left;

$("#target").offset().top;

 


1,获取对象(自定义调整打开新窗口参照元素)

 代码如下 复制代码
var obj = $("#oButton");

实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调整,实例中将创建的新窗口显示的按钮的右下角。

2,获取对象元素的位置(offset()方法)

 代码如下 复制代码
var offset = obj.offset();

获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置。

3,获取对象元素的宽度(width()方法)

 代码如下 复制代码
var right = offset.left+obj.width();

实例中是获取对象的右下角位置,创建新窗口的左部位置。

4,获取对象元素的高度(height()方法)

 代码如下 复制代码
var down = offset.top+obj.height();

实例中是获取对象的右下角位置,创建新窗口的顶部位置

发表回复
你还没有登录,请先登录注册