The MouseEvent offsetY property is a read-only property and is used for returning the y-coordinate of the mouse pointer, relative to the target element. The MouseEvent offsetY property returns a number which represents the vertical coordinate of the mouse pointer, in pixels with respect to the screen.
Syntax :
event.offsetY
Below program illustrate the MouseEvent offsetY property :
Program: Finding out the vertical coordinate of the mouse pointer relative to a <div> element.
html
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent offsetY Property in HTML</title>
<style>
div
{
border:3px solid green;
height:100px;
width:500px;
}
h1
{
color:green;
}
h2
{
font-family: Impact;
}
body
{
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>MouseEvent offsetY Property</h2>
<p>
Click inside the green box to get the
y-coordinate relative to the top edge.
</p>
<div onclick="coord(event)"></div>
<p>
The y-coordinate, relative to the top edge
of the DIV element is:
<span id="test"></span>
</p>
<script>
function coord(event)
{
var c = event.offsetY;
document.getElementById("test").innerHTML = c;
}
</script>
</body>
</html>
|
Output:
After clicking the button
Supported Web Browsers
- Opera 12.1 and above
- Internet Explorer 9 and above
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 39 and above
- Apple Safari 1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!