jQuery 3.3

.offset()




jquery
احصل على الإحداثيات الحالية للعنصر الأول ، أو قم بتعيين إحداثيات كل عنصر ، في مجموعة العناصر المتطابقة ، بالنسبة إلى الوثيقة.

.offset () إرجاع: Object

الوصف: احصل على الإحداثيات الحالية للعنصر الأول في مجموعة العناصر المتطابقة ، بالنسبة إلى المستند.

  • الإصدار المضاف: 1.2 .offset()

    • هذه الطريقة لا تقبل أي حجج.

تسمح لنا طريقة .offset() باسترداد الموضع الحالي لعنصر (تحديدًا مربع حده ، الذي يستبعد الهوامش) بالنسبة إلى المستند . على النقيض من هذا مع .position() ، والذي يسترد الوضع الحالي نسبة إلى الأصل الإزاحة . عند وضع عنصر جديد فوق عنصر موجود بالفعل للتلاعب العالمي (على وجه الخصوص ، لتنفيذ السحب والإفلات) ، يكون .offset() أكثر فائدة.

.offset() بإرجاع كائن يحتوي على خصائص top left .

ملاحظة: لا يدعم jQuery الحصول على إحداثيات الإزاحة للعناصر المخفية أو حساب الهوامش المعينة على عنصر الوثيقة <html> .

في حين أنه من الممكن الحصول على إحداثيات العناصر ذات visibility:hidden مجموعة visibility:hidden ، display:none مستثنى من شجرة التقديم ، وبالتالي يوجد موضع غير محدد.

ملاحظات إضافية:

  • قد يكون الرقم الذي يتم إرجاعه بواسطة واجهات برمجة التطبيقات ذات الصلة بالأبعاد ، بما في ذلك .offset() ، .offset() في بعض الحالات. يجب ألا نفترض أن الكود عبارة عن عدد صحيح. أيضًا ، قد تكون الأبعاد غير صحيحة عندما يتم تكبير الصفحة بواسطة المستخدم ؛ لا تعرض المستعرضات واجهة برمجة التطبيقات لاكتشاف هذا الشرط.

أمثلة:

الوصول إلى إزاحة الفقرة الثانية:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
 
</body>
</html>

عرض:

انقر لرؤية الإزاحة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
  }
  span {
    color: red;
    cursor: pointer;
  }
  div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
 
<script>
$( "*", document.body ).click(function( event ) {
  var offset = $( this ).offset();
  event.stopPropagation();
  $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
});
</script>
 
</body>
</html>

عرض:

.offset (الإحداثيات) الإرجاع: jQuery

الوصف: قم بتعيين الإحداثيات الحالية لكل عنصر في مجموعة العناصر المتطابقة ، بالنسبة للمستند.

  • الإصدار المضاف: 1.4 .offset (إحداثيات)

    • إحداثيات
      اكتب: PlainObject
      كائن يحتوي على الخصائص top left ، وهي أرقام تشير إلى الإحداثيات الجديدة العلوية والسفلية للعناصر.
  • الإصدار المضافة: 1.4 .offset (وظيفة)

    • وظيفة
      النوع: Function (مؤشر Integer ، PlainObject بلينكجيكت) => PlainObject
      وظيفة لإعادة الإحداثيات لتعيين. يستلم فهرس العنصر في المجموعة كوسيطة أولى والإحداثيات الحالية باعتبارها الوسيطة الثانية. يجب أن تقوم الدالة بإرجاع كائن له خصائص جديدة top و left .

تسمح لنا طريقة .offset() setter بنا بإعادة وضع عنصر. يتم تحديد موضع مربع الحد الخاص بالعنصر بالنسبة للمستند . إذا كانت خاصية نمط position العنصر static حاليًا ، فسيتم تعيينها إلى relative للسماح بإعادة الترتيب هذه.

مثال:

اضبط إزاحة الفقرة الثانية:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
$( "p:last" ).offset({ top: 10, left: 30 });
</script>
 
</body>
</html>

عرض: