جافاسكربتخصائص الصفحة

ما هو الكائن 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 + ' ' + 'height: ' + h;

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w هنا قمنا بتخزين عرض النافذة في المتغير let w = window.innerWidth; // h هنا قمنا بتخزين طول النافذة في المتغير let h = window.innerHeight; // demo هنا قمنا بعرض قياسات النافذة في العنصر الذي يمثله المتغير demo.innerHTML = 'width: ' + w + ' ' + '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 + ' ' + 'height: ' + h;

// 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 + ' ' + '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 + ' ' + 'height: ' + h;

// 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 + ' ' + 'height: ' + h;

جرب الكود

جافاسكربتخصائص الصفحة

ما هو الكائن window؟

الحصول على طول و عرض الصفحة

خصائص الطول و العرض

مثال

تجاهل شريط التمرير

مثال

الحصول على طول و عرض محتوى الصفحة

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث