jQuery中offset()方法的使用
墨初 前端设计 6640阅读
在我们编写HTML网页的时候,有些网页中的DIV元素需要使用到一些偏移的定位,比如说把这一个DIV相对于浏览器进行位置的安排。如果我们使用CSS进行设置的话,是很好实现的,但当我们要使用jQuery的时候该如何去做呢
jQuery中offset()方法的使用
jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置
语法:
$(selector).offset(value)
注:它的value为两个值一个为left一个为top
示例说明:
利用jQuery的offset()方法获取一个偏移DIV元素的位置做标
HTML代码
<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); })
结果如图所示:
注意:利用JQ的offset()获取坐标值时,必须在有position属性才会正确获得设置的Left和top属性的值,否则只会获取获取指定元素相当于文档偏移的值,也就是浏览器默认的top与left的值!
利用jQuery的offset()方法设置元素的偏移位置
HTML代码
<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}); })
结果如下
未点击之前
点击之后
PS:本文章属于本站原创,如需要转载请注明来源地与网址