الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <body> <h1>Javascript On Window Resizing</h1> <p>Resize the window to fire the event.</p> <p id="dimensions"></p> <script> // dimensions في متغير إسمه dimensions يساوي id هنا قمنا بتخزين العنصر الذي يملك let dimensions = document.querySelector('#dimensions'); // الذي يمثل الصفحة نفسها window للكائن resize هنا قمنا بإضافة الحدث // هذا الحدث يتم تنفيذه عندما تغيير حجم المتصفح نفسه بواسطة الماوس window.addEventListener('resize', () => { // dimensions هنا سيتم إعلام المستخدم بقياسات الصفحة كنص في العنصر dimensions.innerHTML = 'Width: ' + window.outerWidth + '<br>'; dimensions.innerHTML += 'Height: ' + window.outerHeight; }); </script> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود