HTML | DOM MouseEvent offsetX Property
The MouseEvent offsetX property is a read-only property which is used for returning the x-coordinate of the mouse pointer, relative to the target element.
Syntax :
event.offsetX
Return Value: It returns a number which represents the horizontal coordinate of the mouse pointer, in pixels.
Below program illustrates the MouseEvent offsetX property:
Example: Finding out the horizontal coordinate of the mouse pointer relative to a <div> element.
html
<!DOCTYPE html> < html > < head > < title >MouseEvent offsetX 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 offsetX Property</ h2 > < p >Click inside the green box to get the x-coordinate relative to the top edge.</ p > < div onclick="coord(event)"></ div > < p >The x-coordinate, relative to the top edge of the DIV element is: < span id="test"></ span ></ p > < script > function coord(event) { var c = event.offsetX; document.getElementById( "test").innerHTML = c; } </ script > </ body > </ html > |
Output:
- After clicking the button:
- After clicking the button:
Supported 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