HTML | DOM MouseEvent offsetY Property

HTML DOM MouseEvent pageX Property

Last Updated : 01 Oct, 2024

The MouseEvent.pageX property returns the horizontal coordinate (in pixels) of the mouse pointer, relative to the entire document (not just the viewport), when a mouse event occurs. This value includes any horizontal scrolling that has been done

Syntax:

event.pageX

Return Values: It returns the horizontal mouse position relative to the full document, including any scrolling.

Example: The below example finds the horizontal coordinates of the mouse pointer when the mouse button is clicked on an element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MouseEvent pageX </title>
</head>

<body style="height: 500px;">
    <h3>Scroll and click anywhere to get the page X position</h3>
    <p id="output">Mouse page X position will appear here.</p>

    <script>
        document.addEventListener('click', function (event) {
            const pageX = event.pageX;
            document.getElementById('output').textContent =
            `Mouse Page X: ${pageX}px`;
        });
    </script>
</body>

</html>

Output:

pageX — Page X

Supported Browsers:

Opera 12.1
Google Chrome 1
Firefox 12
Apple Safari 1

HTML | DOM MouseEvent offsetY Property

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML | DOM Style textDecorationLine Property

The Style textDecorationLine property in HTML DOM used to set the decoration for a line. We can specify any number of decorations for a line. It returns the decoration that is given to the text. Syntax: It returns the textDecorationLine property. object.style.textDecorationLineIt is used to set the

HTML | DOM Style borderImageSlice Property

The borderImageSlice property is used to specify the inward offsets of the image border. The user can specify the value of this property in terms of percentage, number or global values. Syntax: object.style.borderImageSlice = "number|%|fill|initial|inherit" Return Values: It returns a string value,

HTML | DOM Style clear Property

The DOM Style clear property in HTML is used to set or get the position of the specific element relative to floating objects. Syntax To get clear property:object.style.clearTo set clear property:object.style.clear = "none|left|right|both|initial|inherit" Properties Value: valuedescriptionleftDoes no

HTML DOM Table Object

The HTML DOM Table object represents an HTML <table> element in the Document Object Model (DOM). It provides properties and methods to manipulate tables, such as adding or deleting rows and columns, accessing individual cells, or modifying the table's structure dynamically.Syntax:To access tab

HTML | DOM MouseEvent offsetX Property

The MouseEvent offsetX property is a read-only property which is used for returning the x-coordinate of the mouse pointer, relative to the target element. Syntax : event.offsetX Return Value: It returns a number which represents the horizontal coordinate of the mouse pointer, in pixels. Below progra

HTML | DOM Style columns Property

HTML DOM Style columns Property is used to set the width of the column & column count. Syntax: To Return the column property: object.style.columns To Set the column property: object.style.columns= "auto|columnwidth columncount| initial|inherit" Property Values: Auto: Sets both values of width

HTML | DOM Style height Property

HTML DOM Style height Property is similar to CSS Height Property but it is used to set or get height of an element dynamically. Syntax : To set the height property : object.style.height = auto|length|%|initial|inherit;To get height property value: object.style.height Property Values: ValueDescriptio

HTML DOM Base Object

The Base Object in HTML DOM is used to represent the HTML <base> element. This tag is used to set or get the properties of <base> element. This element can be accessed by using getElementById() method. Syntax: document.getElementById("Base_ID"); This "Base_ID" is assigned to HTML <bas

HTML | DOM Meta Object

The DOM Meta Object is used to represent the HTML <meta> element. The Meta element is accessed by getElementById().Properties: Name attribute: This attribute is used to define the name of property.http-equiv attribute: This attribute is used to get http response message header.Scheme attribute

HTML | DOM TouchEvent altKey Property

The TouchEvent altKey property is a read-only property and used for returning a Boolean value which indicates whether or not the "ALT" key was pressed when a touch event was triggered. The TouchEvent altKey property mostly returns false because generally, touch devices do not have an alt key. Syntax