HTML | DOM MouseEvent offsetY Property
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 >w3wiki</ 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
Contact Us