الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> #myDiv { padding: 20px; height: 200px; line-height: 30px; background: bisque; } </style> </head> <body> <h1>Javascript Get Mouse Position</h1> <div id="myDiv">Move over this box to view mouse position.</div> <script> // myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك let myDiv = document.querySelector('#myDiv'); // myDiv للعنصر الذي يمثله المتغير mousemove هنا قمنا بإضافة الحدث // هذا الحدث يتم تنفيذه كلما قام المستخدم بتحريك الماوس فوقه myDiv.addEventListener('mousemove', (event) => { // myDiv إحداثيات مؤشر الماوس سيتم عرضها في العنصر الذي يمثله المتغير myDiv.innerHTML = 'Mouse pointer X: ' + event.clientX + '<br>'; myDiv.innerHTML += 'Mouse pointer Y: ' + event.clientY; }); </script> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود