Get Mouse Coordinates and Mouse Position Using JavaScript
Welcome to the Codewithrandom blog. In this blog, we learn how to Get Mouse Coordinates and Mouse Position Using JavaScript. We use Html, Css, and JavaScript for this Project.
I hope you enjoy our blog so let’s start with a basic Html Structure for the Get Mouse Position.
HTML Code For Get Mouse Position
<div class = "container"> <h5 class = "mainText"> Coordinates of your mouse: <br> hover over this container </h5> </div>
There is all the Html Code for getting Mouse Coordinates. Now, you can see output without Css and JavaScript. then we write Css for the styling project and end of the code we add javascript for the Get Mouse Coordinates and Mouse Position.
50+ Html ,Css & Javascript Projects With Source Code
Only Html Code Output
CSS Code For Get Mouse Position
html{ overflow-y: hidden; } .container { width: 80vw; height: 80vh; background: rgba(20,20,20,0.5); margin:5% auto; border-radius: 20px; border: 10px solid black; } .mainText{ pointer-events: none; font-family: 'Roboto Condensed'; sans-serif; color: white; text-align: center; font-size: 280%; margin: 25vh 18vw; }
10+ Javascript Projects For Beginners With Source Code
Html + Css Updated output
const text = document.querySelector('.mainText'); const mainContainer = document.querySelector('.container'); mainContainer.addEventListener("mousemove", runEvent); //event handler function runEvent(e){ e.preventDefault(); //print Coordinates of the mouse on move on the targeted element: text.textContent = `MouseX: ${e.offsetX}, MouseY: ${e.offsetY}`; //change body background color taking the coordinates as values of rgb: document.body.style.backgroundColor = `rgb(${e.offsetX}, 180, ${e.offsetY})`; }
Get Mouse Coordinates and Mouse Position
Now that we have completed our Get Mouse Coordinates and Mouse Position. Here is our updated output with Html, Css, and JavaScript. Hope you like the Get Mouse Coordinates and Mouse Position Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Thank you!
In this post, we learn how to Get Mouse Coordinates and Mouse Positions. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.
Written by – Code With Random/Anki
Code by – Elena