Skip to main content
offsetX property

Sets or retrieves the x-coordinate of a pointer's position relative to the object firing the event.



p = object.offsetX


Property values

Type: Integer

the x-coordinate, in pixels.


The property is read-only in Microsoft Internet Explorer 4.0, and read/write in Microsoft Internet Explorer 5 and later.

The property is read/write.

The coordinates match the offsetLeft and offsetTop properties of the object. Use offsetParent to find the container object that defines this coordinate system.


This example uses the offsetX property to determine the mouse position relative to the container that fired the event, and displays the mouse coordinates in the status bar at the bottom of the window.

Code example:

<!DOCTYPE html>


<body onmousemove="window.status = 'X=' + window.event.offsetX + ' Y=' + window.event.offsetY" ondblclick="offsetCoords()">
    Double-click anywhere in the window, except in the black area, to obtain the X and Y coordinates of the mouse relative to the object which fired the event, in this case the <strong>body</strong>.

    Click in the black area to obtain the X and Y coordinates of the mouse relative to the eventwhich fired the event, in this case the <strong>div</strong> positioned absolutely at 200px x 300px.

    Notice that the offset coordinates also appear in the status window of the browser (lower left corner).

  <div onclick="offsetCoords();" style="width: 200px; height: 200px; background-color: black; position: absolute; top: 200px; left: 300px; color: white">
    This is an absolutely positioned DIV at 200px and 300px.

  <script type="text/javascript">
    function offsetCoords() {
      var offsetInfo = ""
      offsetInfo = "The x coordinate is: " + window.event.offsetX + "\r"
      offsetInfo += "The y coordinate is: " + window.event.offsetY + "\r"


See also