عرض المنطقة المرئية لصفحة الويب: 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.height
عرض دقة الشاشة: window.screen.width
ارتفاع منطقة العمل المتاحة للشاشة: window.screen.availHeight
عرض منطقة العمل المتاحة للشاشة: window.screen.availWidth
تحديد المواقع بدقة HTML: التمرير لليسار، التمرير، عرض العميل، عرض الإزاحة
التمرير الارتفاع: الحصول على ارتفاع التمرير للكائن.
التمرير لليسار: يضبط أو يحصل على المسافة بين الحافة اليسرى للكائن وأقصى يسار المحتوى المرئي حاليًا في النافذة
التمرير العلوي: يضبط أو يحصل على المسافة بين الجزء العلوي من الكائن وأعلى المحتوى المرئي في النافذة
التمرير: احصل على عرض التمرير للكائن
OffsetHeight: الحصول على ارتفاع الكائن بالنسبة إلى التخطيط أو الإحداثي الأصلي المحدد بواسطة خاصية offsetParent للإحداثي الأصلي.
OffsetLeft: يحصل على الموضع الأيسر المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثي الأصلي المحدد بواسطة خاصية offsetParent.
OffsetTop: الحصول على الموضع العلوي المحسوب للكائن بالنسبة إلى التخطيط أو الإحداثيات الأصلية المحددة بواسطة خاصية offsetTop
الإحداثيات الأفقية لـevent.clientX بالنسبة للمستند
الإحداثي الرأسي events.clientY بالنسبة للمستند
إحداثي events.offsetX الأفقي بالنسبة إلى الحاوية
الإحداثي العمودي events.offsetY بالنسبة إلى الحاوية
قيمة document.documentElement.scrollTop للتمرير العمودي
events.clientX+document.documentElement.scrollTop الإحداثي الأفقي بالنسبة للمستند + مقدار التمرير العمودي
الاختلافات بين IE وFireFox هي كما يلي:
IE6.0، FF1.06+:
عرض العميل = العرض + الحشو
ارتفاع العميل = الارتفاع + الحشو
OffsetWidth = العرض + الحشو + الحدود
إزاحة الارتفاع = الارتفاع + الحشو + الحدود
آي إي 5.0/5.5:
عرض العميل = العرض - الحدود
ClientHeight = height-border
إزاحة العرض = العرض
إزاحة الارتفاع = الارتفاع
(تجدر الإشارة إلى: سمة الهامش في CSS ليس لها علاقة بـclientWidth وoffsetWidth وclientHeight وoffsetHeight)
عرض المنطقة المرئية لصفحة الويب: 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.height
عرض دقة الشاشة: window.screen.width
ارتفاع منطقة العمل المتاحة للشاشة: window.screen.availHeight
عرض منطقة العمل المتاحة للشاشة: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
النقاط الفنية
يستخدم الكود الموجود في هذا القسم بشكل أساسي بعض خصائص كائن المستند فيما يتعلق بالنافذة. الوظائف الرئيسية واستخدام هذه الخصائص هي كما يلي.
للحصول على حجم النافذة، يجب استخدام خصائص وطرق مختلفة لمتصفحات مختلفة: لاكتشاف الحجم الحقيقي للنافذة، تحتاج إلى استخدام خصائص النافذة ضمن Netscape ضمن IE، تحتاج إلى التعمق داخل مستند للكشف عن الجسم؛ في بيئة DOM، إذا كنت ترغب في الحصول على حجم النافذة، فأنت بحاجة إلى الانتباه إلى حجم العنصر الجذر، وليس العنصر.
تحتوي خاصية العرض الداخلي لكائن النافذة على العرض الداخلي للنافذة الحالية. تحتوي خاصية الارتفاع الداخلي لكائن النافذة على الارتفاع الداخلي للنافذة الحالية.
تتوافق سمة النص لكائن المستند مع علامة مستند HTML. تمثل الخاصية documentElement لكائن Document العقدة الجذرية لمستند HTML.
يمثل document.body.clientHeight الارتفاع الحالي للنافذة التي يوجد بها مستند HTML. يمثل document.body.clientWidth العرض الحالي للنافذة التي يوجد بها مستند HTML.
تنفيذ التعليمات البرمجية
انسخ رمز الكود كما يلي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title>الرجاء تغيير حجم نافذة المتصفح</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</الرأس>
<الجسم>
<h2 align="center">يُرجى تغيير حجم نافذة المتصفح</h2><hr>
<إجراء النموذج = "#" طريقة = "الحصول على" اسم = "form1" معرف = "form1">
<!--إظهار الحجم الفعلي لنافذة المتصفح-->
الارتفاع الفعلي لنافذة المتصفح: <input type="text" name="availHeight" size="4"><br>
العرض الفعلي لنافذة المتصفح: <input type="text" name="availWidth" size="4"><br>
</النموذج>
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
فار winWidth = 0;
فار winHeight = 0;
وظيفة findDimensions() // الوظيفة: الحصول على الأبعاد
{
//الحصول على عرض النافذة
إذا (window.innerWidth)
winWidth = window.innerWidth;
وإلا إذا ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// احصل على ارتفاع النافذة
إذا (window.innerHeight)
winHeight = window.innerHeight;
وإلا إذا ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// اكتشف الجسم من خلال التعمق داخل المستند للحصول على حجم النافذة
إذا (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// إخراج النتائج إلى مربعي نص
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
// اتصل بالوظيفة واحصل على القيمة
window.onresize=findDimensions;
//-->
</script>
</الجسم>
</html>
تفسير البرنامج المصدر
(1) يقوم البرنامج أولاً بإنشاء نموذج يحتوي على مربعي نص لعرض العرض والارتفاع الحاليين للنافذة، وستتغير قيمهما مع تغير حجم النافذة.
(2) في كود JavaScript اللاحق، تم تحديد متغيرين winWidth وwinHeight أولاً لحفظ قيم الارتفاع والعرض للنافذة.
(3) ثم، في الدالة findDimensions ()، استخدم window.innerHeight وwindow.innerWidth للحصول على ارتفاع وعرض النافذة، وحفظهما في المتغيرين المذكورين أعلاه.
(4) ثم قم بالكشف على الجسم من خلال التعمق في المستند والحصول على حجم النافذة وتخزينه في المتغيرين المذكورين أعلاه.
(5) في نهاية الوظيفة، من خلال الوصول إلى عناصر النموذج بالاسم، يتم إخراج النتائج إلى مربعي نص.
(6) في نهاية كود JavaScript، أكمل العملية بأكملها عن طريق استدعاء وظيفة findDimensions ().