Javascript offsetY property

Javascript offsetY property displays the y-coordinates or height of the given element. The read-only MouseEvent offsetY attribute returns the y-coordinate of the mouse cursor for the target element. We can add the event function on the div tag, web page, or other elements to display y-coordination.

Syntax

The following syntax works for the offset function. We can get the vertical value of the given element.

<script>
var  variable_name = event.offsetY;
</script>

Return Value

It gives back a number that, in pixels, indicates the mouse pointer's vertical coordinate.

Examples

The following examples show the y-coordinate of the given elements.

Example1

The following example displays the height or y-coordinate of the paragraph elements. These coordinates work with the function and mouse cursor. The property displays height up to the mouse cursor 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 image displays the y-coordinates of the paragraph elements.

Example2

The following example displays the y-coordinate of the paragraph elements. This property works with the function and mouse cursor. The property displays height up to the mouse cursor on the alert box.

<!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 image displays the y-coordinates of the paragraph elements.

Example3

The following example displays the y-coordinate of the body elements. This property works with the function and mouse cursor. The property displays height up to the mouse cursor on 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 displays the y-coordinates of the paragraph elements.

Example4

The following example displays the height or y-coordinate of the entire web page. These coordinates work with the function and mouse cursor. The property displays height up to the mouse cursor 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 image displays the y-coordinates of the paragraph 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 helps to get the height or y-coordinates of the given elements. It helps users and developers to get responsive functions. It worked to get the exact height from the initial to the mouse cursor.

Next TopicJavaScript onunload Event

← prev next →