JS / خصائص الصفحة

الناشر :كودا فوكس -

خصائص الصفحة

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

أي نافذة مفتوحة في المتصفح عبارة window بما في ذلك الصفحة نفسها و أي صفحة داخلية يتم عرضها فيها بواسطة الوسم <iframe> و حتى النوافذ المنبثقة الجاهزة على اختلاف أنواعها و التي يمكن إظهارها بواسطة جافاسكربت سواء نافذة لإظهار رسالة تنبيه (Alert)، نافذة لأخذ موافقة أو رفض (Confirm)، أو نافذة لإدخال معلومة (Prompt).

JS - خصائص الصفحة


ستتعلم كيف تتعامل مع النوافذ المنبثقة الجاهزة في جافاسكربت في درس لاحق.

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

من أكثر الأشياء التي تحتاجها في تصاميمك هي معرفة كم هو طول و عرض الصفحة حتى تعرض المحتوى بشكل مناسب بناءاً على قياسات النافذة التي يتم تصفّح الموقع من خلالها.


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

  • الخاصية window.innerHeight تعطينا طول الصفحة بالبكسل.
  • الخاصية window.innerWidth تعطينا عرض الصفحة بالبكسل.

في حال كان يظهر للصفحة شريط تمرير (Scrollbar) سواء أفقياً أو عمودياً فإنه يتم حساب حجمه ضمن الحجم الذي تعطيه لك هذه الخصائص.

في المثال التالي قمنا بعرض طول و عرض الصفحة مع احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Width And Height</h1>
    
    <p id="demo"></p>

    <script>
        // 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;
    </script>
</body>
</html>

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

  • الخاصية document.documentElement.clientHeight تعطينا طول الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير العمودي إن كان ظاهراً.
  • الخاصية document.documentElement.clientWidth تعطينا عرض الصفحة بالبكسل مع عدم احتساب حجم شريط التمرير الأفقي إن كان ظاهراً.

في المثال التالي قمنا بعرض طول و عرض الصفحة مع عدم احتساب أي شريط تمرير يتم إظهاره أفقياً و عمودياً ضمن الحجم.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Width And Height Excluding Scrollbars</h1>
    
    <p id="demo"></p>

    <script>
        // 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;
    </script>
</body>
</html>

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

في حال أردت الحصول على حجم محتوى الصفحة الموجود في الوسم <body> يمكنك استخدام الخصائص التالية:

  • الخاصية document.body.clientHeight تعطينا طول المساحة المعروض فيها محتوى الوسم <body> بالبكسل.
  • الخاصية document.body.clientWidth تعطينا عرض المساحة المعروض فيها محتوى الوسم <body> بالبكسل.

في المثال التالي قمنا بعرض طول و عرض المحتوى الموجود في <body> الصفحة.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
html>
<body>
    <h1>JavaScript Body Width And Height</h1>
    
    <p id="demo"></p>

    <script>
        // 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;
    </script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال