عرض المنطقة المرئية لصفحة الويب: document.body.clientwidth
ارتفاع المنطقة المرئية لصفحة الويب: document.body.clientheight
عرض المنطقة المرئية لصفحة الويب: document.body.OffsetWidth (بما في ذلك عرض خط الحافة)
ارتفاع المنطقة المرئية لصفحة الويب: document.body.offsetheight (بما في ذلك عرض خط الحافة)
عرض النص الكامل لصفحة الويب: document.body.scrollwidth
النص الكامل لصفحة الويب: document.body.scrollheight
يتم طرح صفحة الويب على مستوى عالٍ: document.body.scrolltop
يسار صفحة الويب التي يتم طرحها: document.body.scrollleft
في الجزء الرئيسي من صفحة الويب: window.screentop
يسار النص الرئيسي لصفحة الويب: window.screenleft
دقة شاشة عالية: window.screen.hight
عرض دقة الشاشة: window.screen.width
شاشة مساحة العمل المتاحة: window.screen.availheight
عرض مساحة العمل المتاح: window.screen.availwidth
html تحديد موقع الدقة: scrollleft ، scrollwidth ، clientwidth ، offsetwidth
Scrollheight: يحصل على ارتفاع التمرير للكائن.
التمرير: قم بتعيين أو احصل على المسافة بين الحدود اليسرى للكائن والنهاية اليسرى للمحتوى المرئي حاليًا في النافذة
Scrolltop: قم بتعيين أو احصل على المسافة بين الجزء العلوي من الكائن وأعلى المحتوى المرئي في النافذة
التمرير: احصل على عرض التمرير للكائن
Offsetheight: يحصل على ارتفاع الكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية الإحداثيات الإحداثي الأصل
OffsetLeft: يحصل على الموضع الأيسر المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثيات الأصل المحددة بواسطة خاصية الإزاحة
Offsettop: يحصل على الموضع الأعلى المحسوب للكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية Offsettop
Event.Clientx الإحداثيات الأفقية بالنسبة إلى المستند
Event.clienty الإحداثيات الرأسية بالنسبة للوثيقة
Event.Offsetx الإحداثيات الأفقية نسبة إلى الحاوية
Event.Offsety الإحداثيات الرأسية نسبة إلى الحاوية
document.documentElement.scrolltop قيمة التمرير رأسياً
event.clientx + document.documentElement.scrolltop نسبة إلى الإحداثي الأفقي للوثيقة + مقدار التمرير في الاتجاه الرأسي
أي اختلافات Firefox هي كما يلي :
IE6.0 ، FF1.06+:
عرض العميل = عرض + حشوة
ClientHeight = ارتفاع + حشوة
OffsetWidth = Width + Padding + Border
Offsetheight = ارتفاع + حشوة + الحدود
IE5.0/5.5 :
عرض العميل = العرض - الحدود
العميل = الارتفاع - الحدود
OffsetWidth = العرض
OffSetheight = الارتفاع
(تجدر الإشارة إلى أن سمة الهامش في CSS لا علاقة لها بعرض العميل ، وعرض الإزاحة ، العميل ، و Offsetheight)
－－－－－－－－－－－－－－－－－－－
النقاط البارزة الفنية
يستخدم الرمز في هذا القسم بشكل أساسي بعض خصائص كائن المستند حول النافذة. الوظائف الرئيسية واستخدام هذه الخصائص هي كما يلي.
للحصول على حجم النافذة ، يجب استخدام الخصائص والأساليب المختلفة لمتصفحات مختلفة: للكشف عن الحجم الحقيقي للنافذة ، تحتاج إلى استخدام سمات النافذة تحت Netscape ؛ للكشف عن الجسم في IE ؛ للحصول على حجم النافذة ، تحتاج إلى الانتباه إلى حجم عنصر الجذر ، وليس العنصر.
تحتوي الخاصية الداخلية للعديد من كائن النافذة على العرض الداخلي للنافذة الحالية. تحتوي خاصية Innerheight لكائن النافذة على الارتفاع الداخلي للنافذة الحالية.
تتوافق سمة الجسم لكائن المستند مع علامة مستند HTML. تمثل خاصية DocumentElement لكائن المستند عقدة الجذر لمستند HTML.
يمثل document.body.clientheight الارتفاع الحالي للنافذة حيث يوجد مستند HTML. يمثل document.body.clientwidth العرض الحالي للنافذة حيث يوجد مستند HTML.
القليل من الأبحاث حول الحصول على حجم النوافذ المرئية في متصفحات مختلفة.
في اختباري المحلي: يمكن استخدامه تحت IE و Firefox و Opera
document.body.clientwidth
document.body.clientheight يمكن الحصول عليها ، إنه بسيط للغاية ومريح.
في مشروع الشركة: لا تزال الأوبرا مستخدمة
document.body.clientwidth
document.body.clientheight
لكن أي واستخدام Firefox
document.documentElement.clientwidth
document.documentElement.clientheight
اتضح أن معيار W3C يسبب المتاعب
إذا قمت بإضافة هذا السطر إلى الصفحة
في IE: document.body.clientwidth ==> عرض كائن الجسم
document.body.clientheight ==> ارتفاع كائن الجسم
document.documentElement.ClientWidth ==> عرض المنطقة المرئية
document.documentElement.clientheight ==> ارتفاع المنطقة المرئية
في Firefox: document.body.clientwidth ==> عرض كائن الجسم
document.body.clientheight ==> ارتفاع كائن الجسم
document.documentElement.ClientWidth ==> عرض المنطقة المرئية
document.documentElement.clientheight ==> ارتفاع المنطقة المرئية؟
في الأوبرا: document.body.clientwidth ==> عرض المنطقة المرئية
document.body.clientheight ==> ارتفاع المنطقة المرئية
document.documentElement.ClientWidth ==> عرض كائن الصفحة (أي عرض كائن الجسم بالإضافة إلى عرض الهامش) document.documentElement.clientheight ==> ارتفاع كائن الصفحة (أي ارتفاع كائن الجسم بالإضافة إلى ارتفاع الهامش)
إذا لم يكن هناك معيار لـ W3C ،
ثم IE هو: document.documentElement.ClientWidth ==> 0
document.documentElement.clientheight ==> 0
Firefox هو: document.documentElement.ClientWidth ==> عرض كائن الصفحة (أي عرض كائن الجسم بالإضافة إلى عرض الهامش)
document.documentElement.Clientheight ==> ارتفاع كائن الصفحة (أي ارتفاع كائن الجسم بالإضافة إلى ارتفاع الهامش)
أوبرا هي: document.documentElement.ClientWidth ==> عرض كائن الصفحة (أي عرض كائن الجسم بالإضافة إلى عرض الهامش)
document.documentElement.Clientheight ==> ارتفاع كائن الصفحة (أي ارتفاع كائن الجسم بالإضافة إلى ارتفاع الهامش)
انها حقا متاعب. في الواقع ، من منظور التصميم والتطوير في الواجهة الأمامية ، من الأفضل أن يكون لديك عدد أقل من الأشياء والأساليب من عدم استخدام أحدث المعايير. ولكن إذا لم تتمكن من مواكبة هذا الاتجاه ، فلن تكون مصممًا كبيرًا أبدًا ، لذلك يجب أن نفهم هذه المعرفة وإتقانها.