Javascript DOM MouseEvent offsetY Property

Introduction

Click inside a DIV and output the y-coordinate of the click, relative to the DIV element: 

var x = event.offsetY;

The offsetY property returns the y-coordinate the mouse cursor, relative to the target element.

View in separate window 

<!DOCTYPE html>
<html>
<style>
div {border:1px solid red; height:300px;}
span {font-size:30px;}
</style>//w  w  w  . ja  v  a  2s .c om
<body>
<p>Click inside the red DIV element:</p>
<div onclick="myFunction(event)"></div>
<p>The y-coordinate, relative to the top edge of the DIV element is: <span id="demo"></span></p>

<script>
function myFunction(event) {
  var y = event.offsetY;
  document.getElementById("demo").innerHTML = y;
}
</script>

</body>
</html>

The offsetY property returns the y-coordinate of the mouse pointer, relative to the target element.

To get the x-coordinate, use the offsetX property.

This property is read-only.

The offsetY property returns a Number representing the vertical coordinate of the mouse pointer, in pixels.




PreviousNext

Related