Get Mouse Coordinates and Mouse Position Using JavaScript

Post author:admin
Post published:May 9, 2022
Post category:HTML & CSS / Html & CSS Project / javascript project / Project Ideas
Post comments:0 Comments

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.

Table of Contents

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

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})`;
}