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

jQuery中offset()方法的使用

2018-02-03JS/JQ墨初793°c
A+ A-

在我们编写HTML网页的时候,有些网页中的DIV元素需要使用到一些偏移的定位,比如说把这一个DIV相对于浏览器进行位置的安排。如果我们使用CSS进行设置的话,是很好实现的,但当我们要使用jQuery的时候该如何去做呢

jQuery中offset()方法的使用

jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置

语法:

$(selector).offset(value)

注:它的value为两个值一个为left一个为top

示例说明:

利用jQuery的offset()方法获取一个偏移DIV元素的位置做标

HTML代码

利用jQuery的offset()方法获取一个偏移DIV元素的位置做标

<div class="mochu">
    <p>
        这里DIV元素的内容!
    </p>
</div>
<button id="mochu">点我测试</button>

CSS代码

.mochu{
    left: 100px;
    top: 100px;
    width:400px;
    position: fixed;
}

JQ代码

$("#mochu").click(function(){
    var $offset = $(".mochu").offset();
    alert("let:"+$offset.left+"  "+"top:"+$offset.top);
})

结果如图所示:

利用jQuery的offset()方法获取一个偏移DIV元素的位置做标

注意:利用JQ的offset()获取坐标值时,必须在有position属性才会正确获得设置的Left和top属性的值,否则只会获取获取指定元素相当于文档偏移的值,也就是浏览器默认的top与left的值!

利用jQuery的offset()方法设置元素的偏移位置

HTML代码

利用jQuery的offset()方法设置元素的偏移位置

<div class="mochu">
    <p>
        这里DIV元素的内容!
    </p>
</div>
<button id="mochu">点我测试</button>

CSS代码

.mochu{
    position: fixed;
}

jQuery代码

$("#mochu").click(function(){
    $(".mochu").offset({left:100,top:100});
})

结果如下

未点击之前

利用jQuery的offset()方法设置元素的偏移位置

点击之后

利用jQuery的offset()方法设置元素的偏移位置

PS:本文章属于本站原创,如需要转载请注明来源地与网址

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

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

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

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录