Javascript offsetX property

Javascript offset property displays the x-coordinate or width of the specific element. The read-only MouseEvent offsetX attribute returns the x-coordinate of the mouse cursor for the target element. We can add the event function on the div tag, web page, or other elements to show x-coordination.

Syntax

The following syntax works for the offsetX function. We can get the horizontal value of the specific element.

<script>
var  variable_name = event.offsetX;
</script>

Return Value

It gives back a number that, in pixels, indicates the mouse pointer's horizontal coordinate.

Examples

The following examples show the x-coordinate of the given elements.

Example1

The following example displays the width or x-coordinate of the paragraph elements. These coordinates work with the function and mouse cursor. The property displays the width up to the mouse cursor on the element.

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinate or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style = "color:red;"></p>
<script>
function myEvent(event) {
  let x = event.offsetX;
  document.getElementById("values").innerHTML = "The paragraph elements x-coordinate is: " + x;
}
</script>
</body>
</html>

Output

The image displays the x-coordinates of the paragraph elements.

Example2

The following example displays the x-coordinate of the paragraph elements. This property works with the function and mouse cursor. The property displays the width up to the mouse cursor on the alert box.

<!DOCTYPE html>
<html>
<body>
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinates or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-coordinate of the mouse cursor. </p>
<p onclick = "myEvent(event)" style = "border : 2px solid black; height : 130px"></p>
<p id = "values" style=""> the data displays on the alert box</p>
<script>
function myEvent(event) {
  let x = event.offsetX;
  alert("The paragraph elements x-coordinate is: " + x);
}
</script>
</body>
</html>

Output

The image displays the x-coordinates of the paragraph elements.

Example3

The following example displays the x-coordinate of the body elements. This property works with the function and mouse cursor. The property displays the width up to the mouse cursor on the alert box.

<!DOCTYPE html>
<html>
<body onclick = "myEvent(event)">
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinates or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-coordinate of the mouse cursor. </p>
<script>
function myEvent(event) {
  let x = event.offsetX;
  console.log("The paragraph elements x-coordinate is: " + x);
}
</script>
</body>
</html>

Output

The image displays the x-coordinates of the paragraph elements.

Example4

The following example displays the width or x-coordinate of the entire web page. These coordinates work with the function and mouse cursor. The property displays the width up to the mouse cursor of the <html> tag.

<!DOCTYPE html>
<html onclick = "myEvent(event)">
<body>
<h3>The JavaScript offsetX Property for mouse event </h3>
<p> Javascript offset property displays the x-coordinate or width of the specific element. </p>
<p> The Example displays bordered box of the paragraph </p>
<p> Click inside the bordered box anywhere to get the x-coordinate of the mouse cursor. </p>
<p id = "values" style="color:red;"></p>
<script>
function myEvent(event) {
  let x = event.offsetX;
  document.getElementById("values").innerHTML = "The paragraph elements x-coordinate is: " + x;
}
</script>
</body>
</html>

Output

The image displays the x-coordinates of the paragraph elements.

Web Browsers Supported

The given browsers and its version supported the offset property.

Opera 12.1 or later
Internet Explorer version 9 and up
Google Chrome version 1 and up
Edge 12 or higher
Firefox
Apple Safari version 1 and above

Conclusion

The offsetX property helps get the specific elements' width or x-coordinates. It helps users and developers to get responsive functions. It worked to get the exact width from the initial to the mouse cursor.

Next TopicJavascript offsetY property

← prev next →