Export (0) Print
Expand All

offsetX property

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

Syntax

JavaScript

p = object.offsetX

 

Property values

Type: Integer

the x-coordinate, in pixels.

Remarks

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.

Examples

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: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/offsetX.htm



<!DOCTYPE html>
<html>

<head>
  <title>offsetX</title>
</head>

<body onmousemove="window.status = 'X=' + window.event.offsetX + ' Y=' + window.event.offsetY" ondblclick="offsetCoords()">
  <p>
    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>.
  </p>

  <p>
    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.
  </p>

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

  <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.
  </div>

  <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"
      alert(offsetInfo);
    }
  </script>
</body>

</html>

See also

event

 

 

Show:
© 2014 Microsoft