jquery如何操作元素的位置?

jquery如何操作元素的位置?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、使用.offset()

在匹配的元素中,获取第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。

.offset() 这个不接受任何参数。

var offset = p.offset(); //获取到这个元素的位置
p.html( "left: " + offset.left + ", top: " + offset.top );

offset.left 元素距左面的距离, .offset.top 元素距上面的距离

如果元素设置的是visibility:hidden; 可以获取到坐标,

如果元素设置的是 display:none; 位置值是 undefined;

.offset(coordinates)

coordinates 一个包含top 和 left 属性的对象,用整数指明元素的新顶部和左边坐标。

.offset(function(index,coords))

返回用于设置坐标的函数。

$("p:last").offset({ top: 10, left: 30 }); 设置最后一个p元素的位置。

2、使用.offsetParent()

取得离指定元素最近的含有定位信息的元素, css position 属性是 relative absolute, 或fixed。

.offsetParent() 这个元素不接受任何参数。

$('li.item-a').offsetParent().css('background-color', 'red');

3、使用.position()

获取到匹配元素中第一个元素的当前坐标

.position() 这个方法不接受任何参数.position() 可以获取得元素相对于父元素的偏移位置。包含 top 和 left 注,不支持获取隐藏元素的便宜的坐标

var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );

4、使用.scrollLeft()

获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条的的距离。

.scrollLeft() 这个方法不接受任何参数。

$("p:last").text( "scrollLeft:" + p.scrollLeft() ); //获取p 元素的 横向滚动条距离。

.scrollLeft(value)

设置每一个匹配元素的水平滚动条的距离。

$("div.demo").scrollLeft(300);

5、使用.scrollTop()

获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条的距离。

.scrollTop() 这个方法不接受任何参数。

$("p:last").text( "scrollTop:" + p.scrollTop() ); //获取p 元素的垂直滚动条距离。

.scrollLeft(value)

设置每一个匹配元素的垂直滚动条的距离。

$("div.demo").scrollLeft(300);

更多前端开发知识,请查阅 HTML中文网 !!

以上就是jquery如何操作元素的位置?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏