جافاسكربتخصائص الصفحة
- ما هو الكائن window؟
- الحصول على طول و عرض الصفحة
- الحصول على طول و عرض محتوى الصفحة
ما هو الكائن window؟
أي نافذة مفتوحة في المتصفح عبارة window بما في ذلك الصفحة نفسها و أي صفحة داخلية يتم عرضها فيها بواسطة الوسم <iframe> و حتى النوافذ المنبثقة الجاهزة على اختلاف أنواعها و التي يمكن إظهارها بواسطة جافاسكربت سواء نافذة لإظهار رسالة تنبيه (Alert)، نافذة لأخذ موافقة أو رفض (Confirm)، أو نافذة لإدخال معلومة (Prompt).
ستتعلم كيف تتعامل مع النوافذ المنبثقة الجاهزة في جافاسكربت في درس لاحق.
الحصول على طول و عرض الصفحة
من أكثر الأشياء التي تحتاجها في تصاميمك هي معرفة كم هو طول و عرض الصفحة حتى تعرض المحتوى بشكل مناسب بناءاً على قياسات النافذة التي يتم تصفّح الموقع من خلالها.
خصائص الطول و العرض
- الخاصية window.innerHeight تعطينا طول الصفحة بالبكسل.
- الخاصية window.innerWidth تعطينا عرض الصفحة بالبكسل.
في حال كان يظهر للصفحة شريط تمرير (Scrollbar) سواء أفقياً أو عمودياً فإنه يتم حساب حجمه ضمن الحجم الذي تعطيه لك هذه الخصائص.
في المثال التالي قمنا بعرض طول و عرض الصفحة مع احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.
مثال
تجاهل شريط التمرير
- الخاصية document.documentElement.clientHeight تعطينا طول الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير العمودي إن كان ظاهراً.
- الخاصية document.documentElement.clientWidth تعطينا عرض الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير الأفقي إن كان ظاهراً.
في المثال التالي قمنا بعرض طول و عرض الصفحة مع عدم احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.
مثال
الحصول على طول و عرض محتوى الصفحة
في حال أردت الحصول على حجم محتوى الصفحة الموجود في الوسم <body> يمكنك استخدام الخصائص التالية:
- الخاصية document.body.clientHeight تعطينا طول المساحة المعروض فيها محتوى الوسم <body> بالبكسل.
- الخاصية document.body.clientWidth تعطينا عرض المساحة المعروض فيها محتوى الوسم <body> بالبكسل.
في المثال التالي قمنا بعرض طول و عرض المحتوى الموجود في <body>
الصفحة.