في عملية إنشاء صفحة ويب، تحتاج أحيانًا إلى معرفة الموقع الدقيق لعنصر ما على صفحة الويب.
يلخص البرنامج التعليمي التالي المعرفة ذات الصلة بجافا سكريبت في تحديد موضع صفحة الويب.
1. حجم صفحة الويب وحجم نافذة المتصفح
أولا، يجب توضيح مفهومين أساسيين.
المساحة الكاملة لصفحة الويب هي حجمها. عادةً، يتم تحديد حجم صفحة الويب حسب المحتوى وأوراق أنماط CSS.
يشير حجم نافذة المتصفح إلى مساحة صفحة الويب التي تظهر في نافذة المتصفح، والتي تسمى أيضًا منفذ العرض.
من الواضح أنه إذا كان من الممكن عرض محتوى صفحة الويب بالكامل في نافذة المتصفح (أي لا تظهر أشرطة التمرير)، فإن حجم صفحة الويب وحجم نافذة المتصفح متساويان. إذا تعذر عرض الصفحة بأكملها، فقم بالتمرير في نافذة المتصفح لعرض أجزاء مختلفة من صفحة الويب.
2. احصل على حجم صفحة الويب
يحتوي كل عنصر في صفحة الويب على سمات ClientHeight وclientWidth. تشير هاتان السمتان إلى المنطقة المرئية التي يشغلها جزء المحتوى من العنصر بالإضافة إلى المساحة المتروكة، باستثناء المساحة التي تشغلها الحدود وشريط التمرير.
(الشكل 1: خصائص ClientHeight وclientWidth)
لذلك، تمثل سمات ClientHeight وclientWidth لعنصر المستند حجم صفحة الويب.
انسخ رمز الكود كما يلي:
الدالة getViewport(){
إذا (document.compatMode == "BackCompat"){
يعود {
العرض: document.body.clientWidth،
الارتفاع: document.body.clientHeight
}
} آخر {
يعود {
العرض: document.documentElement.clientWidth،
الارتفاع: document.documentElement.clientHeight
}
}
}
يمكن لوظيفة getViewport المذكورة أعلاه إرجاع ارتفاع وعرض نافذة المتصفح. عند استخدامه، هناك ثلاثة أشياء عليك الانتباه إليها:
1) يجب تشغيل هذه الوظيفة بعد تحميل الصفحة، وإلا فلن يتم إنشاء كائن المستند وسيقوم المتصفح بالإبلاغ عن خطأ.
2) في معظم الحالات، تُرجع document.documentElement.clientWidth القيمة الصحيحة. ومع ذلك، في وضع المراوغات في IE6، تقوم document.body.clientWidth بإرجاع القيمة الصحيحة، لذلك تتم إضافة حكم وضع المستند إلى الوظيفة.
3) ClientWidth وclientHeight كلاهما خاصيتين للقراءة فقط ولا يمكن تعيين قيم لهما.
3. طريقة أخرى للحصول على حجم صفحة الويب
يحتوي كل عنصر في صفحة الويب أيضًا على خصائص التمرير والارتفاع والعرض، والتي تشير إلى المنطقة المرئية للعنصر بما في ذلك شريط التمرير.
بعد ذلك، تكون خصائص التمرير الارتفاع والعرض العرضي لكائن المستند هي حجم صفحة الويب، مما يعني طول شريط التمرير وعرضه بالكامل.
باتباع الدالة getViewport()، يمكن كتابة الدالة getPagearea().
انسخ رمز الكود كما يلي:
وظيفة getPagearea () {
إذا (document.compatMode == "BackCompat"){
يعود {
العرض: document.body.scrollWidth،
الارتفاع: document.body.scrollHeight
}
} آخر {
يعود {
العرض: document.documentElement.scrollWidth،
الارتفاع: document.documentElement.scrollHeight
}
}
}
ومع ذلك، هناك مشكلة في هذه الوظيفة. إذا كان من الممكن عرض محتوى صفحة الويب بالكامل في نافذة المتصفح بدون أشرطة التمرير، فيجب أن يكون عرض العميل وعرض التمرير لصفحة الويب متساويين. ولكن في الواقع، تختلف طرق المعالجة لدى المتصفحات المختلفة، وهاتان القيمتان ليسا بالضرورة متساويتين. لذلك، نحتاج إلى أخذ القيمة الأكبر بينها، لذلك نحتاج إلى إعادة كتابة وظيفة getPagearea().
انسخ رمز الكود كما يلي:
وظيفة getPagearea () {
إذا (document.compatMode == "BackCompat"){
يعود {
العرض: Math.max(document.body.scrollWidth،
document.body.clientWidth)،
الارتفاع: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} آخر {
يعود {
العرض: Math.max(document.documentElement.scrollWidth،
document.documentElement.clientWidth)،
الارتفاع: Math.max(document.documentElement.scrollHeight،
document.documentElement.clientHeight)
}
}
}
4. الحصول على الموضع المطلق لعناصر صفحة الويب
يشير الموضع المطلق لعنصر صفحة الويب إلى إحداثيات الزاوية اليسرى العليا للعنصر بالنسبة إلى الزاوية اليسرى العليا لصفحة الويب بأكملها. يمكن الحصول على هذا الموقف المطلق من خلال الحساب.
أولاً، يحتوي كل عنصر على سمات OffsetTop وoffsetLeft، والتي تمثل المسافة بين الزاوية اليسرى العليا للعنصر والزاوية اليسرى العليا للحاوية الأصلية (كائن OffsetParent). لذلك، ما عليك سوى تجميع هاتين القيمتين للحصول على الإحداثيات المطلقة للعنصر.
(الشكل 2: سمات OffsetTop وoffsetLeft)
يمكن استخدام الوظيفتين التاليتين للحصول على الإحداثي الإحداثي والموضع المطلق.
انسخ رمز الكود كما يلي:
دالة getElementLeft(element){
var actLeft = element.offsetLeft;
فار الحالي = element.offsetParent;
بينما (الحالي !== فارغ){
actialLeft += current.offsetLeft;
current = current.offsetParent;
}
إرجاع اليسار الفعلي؛
}
وظيفة getElementTop(element){
var actTop = element.offsetTop;
فار الحالي = element.offsetParent;
بينما (الحالي !== فارغ){
actualTop += current.offsetTop;
current = current.offsetParent;
}
إرجاع actualTop؛
}
نظرًا لأن كائن offsetParent في الجداول وإطارات iframe لا يساوي بالضرورة الحاوية الأصلية، فإن الوظيفة المذكورة أعلاه لا تنطبق على العناصر الموجودة في الجداول وإطارات iframe.
5. الحصول على الموضع النسبي لعناصر صفحة الويب
يشير الموضع النسبي لعنصر صفحة الويب إلى إحداثيات الركن الأيسر العلوي من العنصر بالنسبة إلى الركن الأيسر العلوي من نافذة المتصفح.
باستخدام الموضع المطلق، من السهل الحصول على الموضع النسبي، ما عليك سوى طرح مسافة التمرير لشريط التمرير بالصفحة من الإحداثيات المطلقة. المسافة العمودية لشريط التمرير هي خاصية التمرير للأعلى لكائن المستند؛ والمسافة الأفقية لشريط التمرير هي خاصية التمرير لليسار لكائن المستند.
(الشكل 3: سمات التمرير إلى الأعلى والتمرير إلى اليسار)
أعد كتابة الوظيفتين في القسم السابق وفقًا لذلك:
انسخ رمز الكود كما يلي:
وظيفة getElementViewLeft(element){
var actLeft = element.offsetLeft;
فار الحالي = element.offsetParent;
بينما (الحالي !== فارغ){
actialLeft += current.offsetLeft;
current = current.offsetParent;
}
إذا (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} آخر {
var elementScrollLeft=document.documentElement.scrollLeft;
}
إرجاع actalLeft-elementScrollLeft;
}
وظيفة getElementViewTop(element){
var actTop = element.offsetTop;
فار الحالي = element.offsetParent;
بينما (الحالي !== فارغ){
actualTop += current.offsetTop;
current = current.offsetParent;
}
إذا (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} آخر {
var elementScrollTop=document.documentElement.scrollTop;
}
إرجاع العنصر العلوي الفعليScrollTop؛
}
يمكن تعيين قيم للسماتscrollTop وscrollLeft، وسيتم تمرير صفحة الويب تلقائيًا إلى الموضع المقابل على الفور، بحيث يمكن استخدامها لتغيير الموضع النسبي لعناصر صفحة الويب. بالإضافة إلى ذلك، فإن طريقة element.scrollIntoView() لها أيضًا تأثير مماثل، مما قد يجعل عنصر صفحة الويب يظهر في الزاوية اليسرى العليا من نافذة المتصفح.
6. طريقة سريعة للحصول على موضع العنصر
بالإضافة إلى الوظائف المذكورة أعلاه، هناك طريقة سريعة لتحديد موضع عناصر صفحة الويب على الفور.
وذلك لاستخدام طريقة getBoundingClientRect(). تقوم بإرجاع كائن يحتوي على أربع سمات: اليسار واليمين والأعلى والأسفل، والتي تتوافق على التوالي مع المسافة بين الزاوية اليسرى العليا والزاوية اليمنى السفلية للعنصر بالنسبة إلى الزاوية اليسرى العليا لنافذة المتصفح (إطار العرض) .
ولذلك، فإن الموضع النسبي لعناصر صفحة الويب هو
انسخ رمز الكود كما يلي:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
بالإضافة إلى مسافة التمرير، يمكنك الحصول على الموضع المطلق
انسخ رمز الكود كما يلي:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
في الوقت الحالي، يدعم كل من IE وFirefox 3.0+ وOpera 9.5+ هذه الطريقة، لكن Firefox 2.x وSafari وChrome وKonqueror لا يدعمونها.