你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

jQuery中position()方法的使用

2018-02-04JS/JQ墨初523°c
A+ A-

上一篇博文说了,我们可以利用JQ中的offset()方法获取或赋值给一个指定元素在视窗中的偏移的坐标值,那么就今天记录一下JQ中的position()方法,这个方法与上一篇说的offset()方法有很多相似的地方

jQuery中position()方法

jQuery中position()方法:获取或赋值给指定元素相当于元素的坐标值的方法

语法:

$(selector).position();

注:同样它也有两个属性值,一个是left,一个top,单位都PX像素

让我们来举个栗子

利用jQuery中position()方法获取坐标

利用jQuery中position()方法获取坐标

代码示例图

html代码

<div class="mochu">
    <p class="elemnt">
        这里P标签元素的内容!
    </p>
</div>

CSS代码

利用jQuery中position()方法获取坐标

CSS代码示例图

.mochu{
    position:absolute;
    height:200px;
    width:200px;
    top:50px;
    left:50px;
    background-color: brown;
}
.elemnt{
    left: 10px;
    top:10px;
    height: 20px;
    line-height: 20px;
    background-color: aqua;
    color: rgb(4, 12, 12);
}

JQ代码

$("#mochu").click(function(){
    var $position = $(".elemnt").position();
    alert("上为:"+$position.top+"px  "+"左为:"+$position.left+"px");
})

结果如下:

利用jQuery中position()方法获取坐标

offset()方法与position()方法区别

1、position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

2、使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移 

3、offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
jQuery中position()方法的使用

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录