حل مشكلة عدم القدرة على الحصول على القيمة باستخدام div.style.left في JavaScript

الجزء الأول: تلخيص المشكلة

　　　 يجب كتابة النمط مباشرة داخل العنصر لكي يتمكن من الحصول على قيمة الخاصية left عبر div.style.left (أي يجب أن يكون نمطًا مدمجًا)، النمط المحدد في css لا يمكن الحصول عليه بهذه الطريقة.

　　 توقيف حركة العنصر عند الوصول إلى 200

setTimeout ( function () {  
  var div = document.getElementById("div4");
  //var left = parseInt(div.style.left) + 5;
  var left = div.offsetLeft + 5;
  div.style.left = left + "px";
  if (left < 200) {
    setTimeout( arguments.callee, 50);
  }
}, 50);

الفرق بين offsetLeft وleft(عن offsetLeft:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft)

　　 1. العناصر التي تم تعيين الخاصية position: relative أو absolute هي التي تحتوي على الخاصية left، جميع العناصر تحتوي على خاصية offsetLeft.

　　 2. يجب تعيين left في النمط المدمج للعنصر لكي يتمكن من الحصول عليه عبر div.style.left؛ يمكن الحصول على offsetLeft مباشرة عبر div.offsetLeft.

　　 3. يمكن قراءة وكتابة left، ويتم الحصول عليه كـ string؛ و offsetLeft قابلة للقراءة فقط، ويتم الحصول عليه كـ number.

　 النقاط المشتركة: طريقة التوجيه متشابهة، إذا تم تحديد عنصر التوجيه في العنصر الأم (position يتم تعيينه إلى relative أو absolute)، فإنه يتعلق بالعنصر التوجيهي، وإلا يتعلق بالعنصر الجذر.

ثالثًا: حالة:

　　　 HTMLElement.offsetParent هو خاصية قابلة للقراءة فقط، تعود إلى العنصر التوجيهي الأقرب (closest) الذي يحتوي على العنصر. إذا لم يكن هناك عنصر توجيهي، فإن offsetParent هو العنصر التالي التالي من table أو العنصر الجذر (في الوضع القياسي هو html؛ في الوضع quirks هو body). عندما يتم تعيين style.display للعنصر إلى "none"، فإن offsetParent يعود إلى null. offsetParent مفيد جدًا، لأن offsetTop و offsetLeft كلاهما يتعلقان بالحدود الداخلية للملحق.

　　　 لأن عناصر الـ span ليست لها عناصر تحديد التوجيه (position) في العنصر الأم، لذا offsetParent للعنصر هو العنصر الجذر، وفي هذه الحالة offsetTop يتعلق بالتوجيه للعنصر الجذر.

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
 <span>Short span. </span>
 <span id="long">Long span that wraps withing this div.</span>
 </div>
<div id="box" style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 //
 // قيمة long.offsetLeft هذه هي offsetLeft لـ span.
 // span هو عنصر داخلي، ليس له تحديد absolute، ولكن offsetParent افتراضي هو العنصر الأم، وليس العنصر الجذر
 //
 box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = long.offsetTop + document.body.scrollTop + "px";
 box.style.width = long.offsetWidth + "px";
 box.style.height = long.offsetHeight + "px";
</script>

إذا تم إضافة خاصية التثبيت إلى عنصر الأب لـ long، النتيجة ستكون كالتالي:

　الجزء الرابع: الخلاصة:

　　 من السهل الحصول على قيمة التحرك باستخدام طريقة offsetLeft (offsetTop) في JavaScript، والحصول على القيمة هو عدد؛ لتغيير قيمة التحرك باستخدام style.left (top،right،bottom)، يتم الحصول على قيمة كنوع نصي، إذا كنت ترغب في تغيير موقع العنصر باستخدام style.left، يجب أولاً تحويل القيمة الحالية لـ left إلى عدد باستخدام parseInt.

الطريقة المذكورة أعلاه هي حل مشكلة عدم القدرة على الحصول على القيمة باستخدام div.style.left في JavaScript، آمل أن تكون مفيدة لكم، إذا كان لديكم أي استفسارات، فلا تترددوا في ترك تعليق.

بيان: محتوى هذا المقال تم استنساخه من الإنترنت، ويحق للمالك الأصلي الحصول على حقوق النشر، تم تقديم المحتوى من قبل مستخدمي الإنترنت الذين قدموه بأنفسهم وتم تحميله، ويملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لتقديم الشكوى، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، فإن هذا الموقع سيزيل المحتوى المزعوم بشكل فوري.