The offset property in JavaScript reveals the x-coordinate or width of a particular element. The MouseEvent's offsetX property, which is read-only, provides the x-coordinate of the mouse pointer relative to the target element. To display the x-coordinate, we can implement the event function on a div tag, a webpage, or various other elements.
Syntax
The syntax outlined below is applicable for the offsetX function. This allows us to retrieve the horizontal position of a particular element.
<script>
var variable_name = event.offsetX;
</script>
Return Value
It returns a numerical value that represents the horizontal position of the mouse cursor in pixels.
Examples
The subsequent illustrations demonstrate the x-coordinate associated with the specified elements.
Example1
The subsequent example illustrates the width or x-coordinate of the paragraph <p> elements. These coordinates interact with both the function and the mouse pointer. This property reveals the width extending up to the position of 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 illustration showcases the x-coordinates of the paragraph <p> components.
Example2
The subsequent example illustrates the x-coordinate of the paragraph elements. This attribute operates in conjunction with the function and the mouse pointer. It shows the width extending to the position of the mouse pointer in the alert dialog 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 illustration illustrates the x-coordinates associated with the paragraph <p> elements.
Example3
The example below illustrates the x-coordinate of the body elements. This property is compatible with the function and the mouse pointer. It shows the width extending up to the position of the mouse pointer in the alert dialog.
<!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 illustration presents the x-coordinates for the elements in paragraph <p>.
Example4
The subsequent illustration demonstrates the width or x-coordinate of the full web page. These coordinates interact with the function as well as the mouse pointer. The property reveals the width extending 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 illustration shows the x-coordinates of the paragraph <p> 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 is utilized to determine the precise width or x-coordinates of specific elements. This functionality assists both users and developers in achieving responsive design features. It effectively measures the exact distance from the starting point of an element to the position of the mouse cursor.