The offsetY property in JavaScript reveals the y-coordinates or height of a specified element. This read-only attribute, MouseEvent offsetY, provides the y-coordinate of the mouse pointer relative to the target element. We can implement the event function on a div tag, a webpage, or various other elements to present the y-coordinate information.
Syntax
The syntax outlined below is applicable for the offset function. This allows us to retrieve the vertical position of a specified element.
<script>
var variable_name = event.offsetY;
</script>
Return Value
It returns a numerical value that represents the vertical position of the mouse cursor in pixels.
Examples
The subsequent examples illustrate the y-coordinate associated with the specified elements.
Example1
The subsequent illustration showcases the y-coordinate or height of the paragraph <p> elements. These coordinates interact with both the function and the mouse pointer. The property indicates the height relative to the mouse pointer's position on the element.
<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style = "color:red;"></p>
<script>
function myEvent(event) {
let x = event.offsetY;
document.getElementById("values").innerHTML = "The paragraph elements y-coordinate is: " + x;
}
</script>
</body>
</html>
Output
The illustration showcases the y-coordinates of the paragraph <p> elements.
Example2
The example below illustrates the y-coordinate of paragraph elements. This specific property operates in conjunction with the function and the mouse pointer. It reveals the height up to the position of the mouse cursor within the alert dialog.
<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style=""> the data displays on the alert box</p>
<script>
function myEvent(event) {
let x = event.offsetY;
alert("The paragraph elements y-coordinate is: " + x);
}
</script>
</body>
</html>
Output
The illustration showcases the y-coordinates of the paragraph <p> elements.
Example3
The example presented below illustrates the y-coordinate for the body elements. This attribute functions in conjunction with the mouse cursor and the associated function. It reveals the height extending up to the position of the mouse cursor within the alert box.
<!DOCTYPE html>
<html>
<body onclick = "myEvent(event)">
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<script>
function myEvent(event) {
let x = event.offsetY;
console.log("The paragraph elements y-coordinate is: " + x);
}
</script>
</body>
</html>
Output
The image illustrates the y-coordinates associated with the paragraph <p> elements.
Example4
The subsequent example illustrates the vertical position or y-coordinate of the complete web page. These coordinates interact with the function and the mouse pointer. The property reveals the height up to the mouse pointer of the <html> tag.
<!DOCTYPE html>
<html onclick = "myEvent(event)">
<body>
<h3>The JavaScript offsetY Property for mouse event </h3>
<p> Javascript offset property displays the y-coordinates or height of the given element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the y-coordinate of the mouse cursor. </p>
<p id = "values" style="color:red;"></p>
<script>
function myEvent(event) {
let x = event.offsetY;
document.getElementById("values").innerHTML = "The paragraph elements y-coordinate is: " + x;
}
</script>
</body>
</html>
Output
The illustration shows the y-coordinates of the paragraph <p> elements.
Web Browsers Supported
The given browsers and its version supported the offset property.
- Opera 12.1 or later
- Internet Explorer version 9 and up
- Google Chrome version 1 and up
- Edge 12 or higher
- Firefox 39 and above for
- Apple Safari version 1 and above
Conclusion
The offsetY property is utilized to retrieve the vertical height or y-coordinates of specified elements. This functionality assists both users and developers in achieving responsive behaviors. It effectively measures the precise distance from the starting point to the position of the mouse cursor.