عرض المنطقة المرئية لصفحة الويب: 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 لا علاقة لها بعرض Clientwidth و OffsetWidth و ClientHeight و Offsetheight)
－－－－－－－－－－－－－－－－－－－－－－－－－－
النقاط البارزة الفنية
يستخدم الرمز في هذا القسم بعض خصائص كائن المستند حول النافذة.
للحصول على حجم النافذة ، يجب استخدام الخصائص والأساليب المختلفة لمتصفحات مختلفة: للكشف عن الحجم الحقيقي للنافذة ، تحتاج إلى استخدام سمات النافذة تحت Netscape ؛ الجسم ؛
تحتوي الخاصية الداخلية للعديد من كائن النافذة على العرض الداخلي للنافذة الحالية. تحتوي خاصية Innerheight لكائن النافذة على الارتفاع الداخلي للنافذة الحالية.
تتوافق سمة الجسم لكائن المستند مع علامة مستند HTML. تمثل خاصية DocumentElement لكائن المستند عقدة الجذر لمستند 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">
<head>
<title> يرجى ضبط نافذة المتصفح </title>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
</head>
<body>
<h2 align = "center"> يرجى ضبط حجم نافذة المتصفح </h2> <hr>
<form action = "#" method = "get" name = "form1" id = "form1">
<! إظهار الحجم الفعلي لنافذة المتصفح>
الارتفاع الفعلي لنافذة المتصفح: <إدخال type = "text" name = "availheight" size = "4"
العرض الفعلي لنافذة المتصفح: <input type = "text" name = "availwidth" size = "4"> <br>
</form>
<script type = "text/javaScript">
<!
var winwidth = 0 ؛
var winheight = 0 ؛
Function 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 ؛
// انقر فوق حجم النافذة عن طريق اكتشاف الجسم بعمق داخل المستند للحصول على حجم الجسم
if (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 ؛
}
الاكتشافات () ؛
// استدعاء الوظيفة للحصول على القيمة
window.onresize = findImentions ؛
///
</script>
</body>
</html>
تفسير برنامج المصدر
(1) يقوم البرنامج أولاً بإنشاء نموذج يحتوي على مربعين نصين لعرض العرض الحالي وارتفاع النافذة ، وستتغير قيمته مع تغيير حجم النافذة.
(2) في رمز JavaScript اللاحق ، يتم تعريف اثنين من المتغيرات Winwidth و Winheight لأول مرة لحفظ قيم الارتفاع والعرض للنافذة.
(3) بعد ذلك ، في الدالة findDimensions () ، استخدم window.innerheight و window.innerwidth للحصول على ارتفاع وعرض النافذة ، وحفظ كلاهما في المتغيرين أعلاه.
(4) بعد ذلك ، من خلال التعمق في المستند ، واكتشاف الجسم ، والحصول على حجم النافذة ، وتخزينه في المتغيرين أعلاه.
(5) في نهاية الوظيفة ، يتم إخراج النتيجة إلى مربعين نصين عن طريق الوصول إلى عنصر النموذج بالاسم.
(6) في نهاية رمز JavaScript ، أكمل العملية بأكملها من خلال استدعاء وظيفة FindDimensions ().