English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery offset() 方法

طريقة HTML/CSS لـ jQuery

offset()方法获取或设置所选元素相对于文档的偏移坐标。

当使用offset()方法获取偏移量时,它将返回第一个选定元素的偏移量坐标(包含2个属性的对象(top 和 left ))。

当使用offset()方法设置偏移量时,它将设置所有选定元素的偏移量坐标。

语法:

获取偏移坐标:

$(selector).offset()

设置偏移量坐标:

$(selector).offset({top:value, left:value})

استخدام الدالة لضبط إحداثيات الترسيم:

$(selector).offset(function(index, currentOffset))

实例

获取段落的偏移坐标:

$("button").click(function(){
  let p = $("p");
  let offset = p.offset();
  p.html("left: 30" + offset.left + ", top: " + offset.top);
});
اختبار‹/›

设置所有段落的偏移坐标:

$("button").click(function(){
  $("p").offset({
    top: 60,
    left: 30
  });
});
اختبار‹/›

استخدام إحداثيات الترسيم لعنصر آخر لضبط إحداثيات الترسيم للعنصر:

$("button").click(function(){
  $("p").offset($("div").offset());
});
اختبار‹/›

استخدام الدالة لضبط إحداثيات الترسيم:

$("button").click(function(){
  $("p").offset(function(i, val){
    let newCord = new Object();
    newCord.left = val.left + 100;
    newCord.top = val.top + 100;
    return newCord;
  });
});
اختبار‹/›

قيمة المتغير

المتغيروصف
{top:value, left:value}تحديد إحداثيات ال顶部 واليسار بالبكسل
function(index, currentOffset)تحديد دالة تعود بجسم يحتوي على إحداثيات ال顶部 واليسار
  • index-عودة موقع العنصر في المجموعة

  • currentOffset-عودة إلى الإحداثيات الحالية للعنصر المحدد

طريقة HTML/CSS لـ jQuery