You are currently viewing Get Mouse Coordinates and Mouse Position Using JavaScript

Get Mouse Coordinates and Mouse Position Using JavaScript

Get Mouse Coordinates and Mouse Position Using JavaScript

Get Mouse Coordinates and Mouse Position Using JavaScript
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

Table of Contents

<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

Get Mouse Coordinates and Mouse Position Using JavaScript
Get Mouse Coordinates and Mouse Position Using JavaScript

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

Get Mouse Coordinates and Mouse Position Using JavaScript
Get Mouse Coordinates and Mouse Position Using JavaScript

 

JavaScript Code For Get Mouse Position

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

Get Mouse Coordinates and Mouse Position Using JavaScript
Get Mouse Coordinates and Mouse Position Using JavaScript

 

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

Leave a Reply