This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

offsetX

Summary

Gets the x-coordinate of the mouse cursor, relative to the target node.

Property of dom/objects/MouseEventdom/objects/MouseEvent

Syntax

Note: This property is read-only.

var xCoordinate = event.offsetX;

Return Value

Returns an object of type NumberNumber

The X coordinate of the mouse cursor.

Examples

This example uses the offsetX property to determine the mouse position relative to the container that fired the event, and also displays the mouse coordinates in the console.

<!doctype html>
<html>
 <head>
  <style>
#div {
  position:absolute;
  top:200px;
  left:300px;
}
  </style>
  <script>
function offsetCoords(e) {
  var offsetInfo = ""
  offsetInfo = "The x coordinate is: " + e.offsetX + "\n"
  offsetInfo += "The y coordinate is: " + e.offsetY + "\r"
  console.log(offsetInfo);
}
function logCoords(e) {
  console.log("X = " + e.offsetX + " Y = " + e.offsetY);
}
function initialize() {
  document.body.addEventListener("mousemove", logCoords, false);
  document.body.addEventListener("click", offsetCoords, false);
  document.getElementById("div").addEventListener("click", offsetCoords, false);
}
window.addEventListener("load", initialize, false);
  </script>
 </head>
 <body>
  <div id="div">
  </div>
 </body>
</html>

Notes

Offset coordinates include the padding of an element, but not its margin or border.

TODO: Check that this is correct.

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

Related specifications

CSSOM View
Working Draft

See also

Related articles

CSSOM

Related pages

Attributions