jQuery中offset()方法的使用

- N +

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

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的值！

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:本文章属于本站原创，如需要转载请注明来源地与网址

标签：jQuery HTML