البحث عن إحداثيات النافذة للحقل

الرجوع الي الدرس

في iframe أدناه ، يمكنك رؤية مستند يحتوي على “الحقل” الأخضر.

استخدم JavaScript للعثور على إحداثيات النوافذ ذات الزوايا المشار إليها بالسهام.

هناك ميزة صغيرة تم تنفيذها في المستند من أجل الراحة. تظهر نقرة في أي مكان إحداثيات هناك.

يجب أن يستخدم الرمز الخاص بك DOM للحصول على إحداثيات النافذة لـ:

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

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

ملاحظة. يجب أن تعمل الشفرة أيضًا إذا كان للعنصر حجم أو حد آخر ، غير مرتبط بأي قيم ثابتة.

افتح sandbox للمهمه.

الزوايا الخارجية

الزوايا الخارجية هي في الأساس ما نحصل عليه من [elem.getBoundingClientRect ()] (https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).

إحداثيات الزاوية العلوية اليسرى answer1 والزاوية اليمنى السفلىanswer2:

          let coords = elem.getBoundingClientRect();

let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];
        

الزاوية الداخلية اليسرى العليا

هذا يختلف عن الزاوية الخارجية بعرض الحدود. طريقة موثوقة للحصول على المسافة هي clientLeft / clientTop:

let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

الزاوية الداخلية اليمنى السفلية

في حالتنا ، نحتاج إلى طرح حجم الحدود من الإحداثيات الخارجية. يمكننا استخدام طريقة CSS:

          let answer4 = [
  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];
        

هناك طريقة بديلة تتمثل في إضافة “clientWidth / clientHeight” إلى إحداثيات الزاوية العلوية اليسرى. ربما هذا أفضل:

          let answer4 = [
  coords.left + elem.clientLeft + elem.clientWidth,
  coords.top + elem.clientTop + elem.clientHeight
];
        

افتح الحل في sandbox.