jquery如何獲取設(shè)置元素位置

本篇內(nèi)容主要講解“jquery如何獲取設(shè)置元素位置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“jquery如何獲取設(shè)置元素位置”吧!

一、獲取元素位置

1. offset()方法

offset()方法返回元素相對于頁面左上角的位置。代碼如下：

$(document).ready(function(){
  var offset = $("#box").offset();
  console.log(offset.left);
  console.log(offset.top);
});

2. position()方法

position()方法返回元素相對于其父元素左上角的位置。代碼如下：

$(document).ready(function(){
  var position = $("#box").position();
  console.log(position.left);
  console.log(position.top);
});

3. scrollTop()方法

scrollTop()方法返回當(dāng)前頁面滾動的垂直距離。代碼如下：

$(document).ready(function(){
  var scrollTop = $(window).scrollTop();
  console.log(scrollTop);
});

二、設(shè)置元素位置

1. offset()方法

offset()方法可以設(shè)置元素相對于頁面左上角的位置。代碼如下：

$(document).ready(function(){
  $("#box").offset({left:100, top:200});
});

2. css()方法

css()方法可以設(shè)置元素的CSS屬性。例如，可以設(shè)置元素的left和top屬性來改變其位置。代碼如下：

$(document).ready(function(){
  $("#box").css({left:100, top:200});
});

3. animate()方法

animate()方法可以在一段時間內(nèi)平滑地改變元素的位置。代碼如下：

$(document).ready(function(){
  $("#box").animate({left:100, top:200}, 1000);
});

到此，相信大家對“jquery如何獲取設(shè)置元素位置”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！