Last Updated : 13 Jun, 2022
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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4