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+:
انسخ الرمز على النحو التالي: ClientWidth = Width + Padding
ClientHeight = ارتفاع + حشوة
OffsetWidth = Width + Padding + Border
Offsetheight = ارتفاع + حشوة + الحدود
IE5.0/5.5:
عرض العميل = حدود العرض
ClientHeight = حدود الارتفاع
OffsetWidth = العرض
OffSetheight = الارتفاع
نصيحة: لا علاقة لها سمة الهامش في CSS بعرض العميل ، وعرض الإزاحة ، والعميل ، و 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.hight
عرض دقة الشاشة: window.screen.width
شاشة مساحة العمل المتاحة: window.screen.availheight
عرض مساحة العمل المتاح: window.screen.availwidth
النقاط البارزة الفنية
يستخدم الرمز في هذا القسم بشكل أساسي بعض خصائص كائن المستند حول النافذة. الوظائف الرئيسية واستخدام هذه الخصائص هي كما يلي.
للحصول على حجم النافذة ، يجب استخدام الخصائص والأساليب المختلفة لمتصفحات مختلفة: للكشف عن الحجم الحقيقي للنافذة ، تحتاج إلى استخدام سمات النافذة تحت Netscape ؛ للكشف عن الجسم في IE ؛ للحصول على حجم النافذة ، تحتاج إلى الانتباه إلى حجم عنصر الجذر ، وليس العنصر.
تحتوي الخاصية الداخلية للعديد من كائن النافذة على العرض الداخلي للنافذة الحالية. تحتوي خاصية Innerheight لكائن النافذة على الارتفاع الداخلي للنافذة الحالية.
تتوافق سمة الجسم لكائن المستند مع علامة مستند HTML. تمثل خاصية DocumentElement لكائن المستند عقدة الجذر لمستند HTML.
يمثل document.body.clientheight الارتفاع الحالي للنافذة حيث يوجد مستند HTML. يمثل document.body.clientwidth العرض الحالي للنافذة حيث يوجد مستند HTML.
نموذج الرمز
نسخة الكود كما يلي:
<! doctype>
<html>
<head>
<title>
يرجى ضبط نافذة المتصفح
</title>
<meta charset = "utf8">
</head>
<body>
<h2 align = "center">
يرجى ضبط حجم نافذة المتصفح
</h2>
<hr>
<form action = "#" method = "get" name = "form1" id = "form1">
<!-إظهار الحجم الفعلي لنافذة المتصفح->
الارتفاع الفعلي لنافذة المتصفح:
<type type = "text" name = "availheight" size = "4">
<br>
العرض الفعلي لنافذة المتصفح:
<type type = "text" name = "availwidth" size = "4">
<br>
</form>
<script type = "text/javaScript">
<!-
var winwidth = 0 ؛
var winheight = 0 ؛
Function FindDimensions () // الوظيفة: احصل على الأبعاد
{
// الحصول على عرض نافذة
if (window.innerwidth) winwidth = window.innerwidth ؛
آخر if ((document.body) && (document.body.clientwidth)) winwidth = document.body.clientwidth ؛
// احصل على ارتفاع النافذة
if (window.innerheight) winheight = window.innerheight ؛
آخر if ((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 = findDimensions ؛
//->
</script>
</body>
</html>
تفسير برنامج المصدر
(1) يقوم البرنامج أولاً بإنشاء نموذج يحتوي على مربعين نصين لعرض العرض الحالي وارتفاع النافذة ، وستتغير قيمته مع تغيير حجم النافذة.
(2) في رمز JavaScript اللاحق ، يتم تعريف اثنين من المتغيرات Winwidth و Winheight لأول مرة لحفظ قيم الارتفاع والعرض للنافذة.
(3) بعد ذلك ، في الدالة findDimensions () ، استخدم window.innerheight و window.innerwidth للحصول على ارتفاع وعرض النافذة ، وحفظ كلاهما في المتغيرين أعلاه.
(4) بعد ذلك ، من خلال التعمق في المستند ، واكتشاف الجسم ، والحصول على حجم النافذة ، وتخزينه في المتغيرين أعلاه.
(5) في نهاية الوظيفة ، يتم إخراج النتيجة إلى مربعين نصين عن طريق الوصول إلى عنصر النموذج بالاسم.
(6) في نهاية رمز JavaScript ، أكمل العملية بأكملها عن طريق استدعاء وظيفة FindDimensions ().