جافاسكربتخصائص الصفحة
- ما هو الكائن
window؟ - الحصول على طول و عرض الصفحة
- الحصول على طول و عرض محتوى الصفحة
ما هو الكائن window؟
أي نافذة مفتوحة في المتصفح عبارة window بما في ذلك الصفحة نفسها و أي صفحة داخلية يتم عرضها فيها بواسطة الوسم <iframe> و حتى النوافذ المنبثقة الجاهزة على اختلاف أنواعها و التي يمكن إظهارها بواسطة جافاسكربت سواء نافذة لإظهار رسالة تنبيه (Alert)، نافذة لأخذ موافقة أو رفض (Confirm)، أو نافذة لإدخال معلومة (Prompt).
ستتعلم كيف تتعامل مع النوافذ المنبثقة الجاهزة في جافاسكربت في درس لاحق.
الحصول على طول و عرض الصفحة
من أكثر الأشياء التي تحتاجها في تصاميمك هي معرفة كم هو طول و عرض الصفحة حتى تعرض المحتوى بشكل مناسب بناءاً على قياسات النافذة التي يتم تصفّح الموقع من خلالها.
خصائص الطول و العرض
- الخاصية
window.innerHeightتعطينا طول الصفحة بالبكسل. - الخاصية
window.innerWidthتعطينا عرض الصفحة بالبكسل.
في حال كان يظهر للصفحة شريط تمرير (Scrollbar) سواء أفقياً أو عمودياً فإنه يتم حساب حجمه ضمن الحجم الذي تعطيه لك هذه الخصائص.
في المثال التالي قمنا بعرض طول و عرض الصفحة مع احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.
مثال
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w هنا قمنا بتخزين عرض النافذة في المتغير let w = window.innerWidth; // h هنا قمنا بتخزين طول النافذة في المتغير let h = window.innerHeight; // demo هنا قمنا بعرض قياسات النافذة في العنصر الذي يمثله المتغير demo.innerHTML = 'width: ' + w + '<br>' + 'height: ' + h;
تجاهل شريط التمرير
- الخاصية
document.documentElement.clientHeightتعطينا طول الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير العمودي إن كان ظاهراً. - الخاصية
document.documentElement.clientWidthتعطينا عرض الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير الأفقي إن كان ظاهراً.
في المثال التالي قمنا بعرض طول و عرض الصفحة مع عدم احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.
مثال
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w هنا قمنا بتخزين عرض النافذة في المتغير let w = document.documentElement.clientWidth; // h هنا قمنا بتخزين طول النافذة في المتغير let h = document.documentElement.clientHeight; // demo هنا قمنا بعرض قياسات النافذة في العنصر الذي يمثله المتغير demo.innerHTML = 'width: ' + w + '<br>' + 'height: ' + h;
الحصول على طول و عرض محتوى الصفحة
في حال أردت الحصول على حجم محتوى الصفحة الموجود في الوسم <body> يمكنك استخدام الخصائص التالية:
- الخاصية
document.body.clientHeightتعطينا طول المساحة المعروض فيها محتوى الوسم<body>بالبكسل. - الخاصية
document.body.clientWidthتعطينا عرض المساحة المعروض فيها محتوى الوسم<body>بالبكسل.
في المثال التالي قمنا بعرض طول و عرض المحتوى الموجود في <body> الصفحة.
مثال
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w في المتغير <body> هنا قمنا بتخزين عرض المساحة المعروض فيها محتوى الوسم let w = document.body.clientWidth; // h في المتغير <body> هنا قمنا بتخزين طول المساحة المعروض فيها محتوى الوسم let h = document.body.clientHeight; // demo في العنصر الذي يمثله المتغير <body> هنا قمنا بعرض قياسات الوسم demo.innerHTML = 'width: ' + w + '<br>' + 'height: ' + h;
