HTML DOM TransitionEvent elapsedTime Property

HTML | DOM MouseEvent clientY Property

Last Updated : 10 Jun, 2022

The MouseEvent clientY property is a read-only property which is used to return the vertical coordinate of the mouse pointer based on the current window when a mouse event was triggered.

Syntax :

event.clientY

Return Value: It returns a number that represents the vertical coordinate of the mouse pointer in pixels.

Below program illustrates the MouseEvent clientY property:

Finding out the vertical coordinates of the mouse pointer when the mouse button is clicked on an element.

html

<!DOCTYPE html>
<html>

<head>
    <title>MouseEvent clientY Property</title>
    <style>
        h1 {
            color: green;
        }
        
        h2 {
            font-family: Impact;
        }
        
        body {
            text-align: center;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>MouseEvent clientY Property</h2>

    <p onclick="coord(event)">
        To get the y coordinates of the mouse pointer,
        click on this paragraph. </p>

    <p id="gfg"></p>

    <script>
        function coord(event) {
            var getYcoord = event.clientY;
            var result = "Y coordinate: " + getYcoord;
            document.getElementById("gfg").innerHTML = result;
        }
    </script>

</body>

</html>

Output:

After clicking the button

Supported Web Browsers:

Google Chrome 1 and above
Edge 12 and above
Opera 12.1 and above
Internet Explorer 9 and above
Firefox 1.5 and above
Apple Safari 1 and above

HTML DOM TransitionEvent elapsedTime Property

S

Shubrodeep Banerjee

Improve

Article Tags :

Similar Reads

HTML | DOM Style animationDirection Property

The animationDirection property is used to set or return the animation direction. This property will have no effect if the animation is set to place only once. Syntax: It returns the animationDirection Property.object.style.animationDirection;It is used to set the animationDirection Property.object.

HTML | DOM Storage key() Method

The DOM Storage key() Method is related to the Storage object and is used to return the name of the key with the specified index. Storage object can be either a localStorage or sessionStorage Object. Syntax: Local storage:localStorage.key(index)Session storage:sessionStorage.key(index) Parameters: I

HTML | DOM Style opacity Property

The Style opacity property in HTML DOM used to set opacity level for an element. Opacity level defines the transparency level where value 1 represents not transparent, 0.5 represents 50% transparency and 0 represents completely transparent.It also returns opacity level of an element. Syntax: It retu

HTML | DOM Storage removeItem() Method

The DOM Storage removeItem() Method is related to the Storage object and is used to remove the specified storage object item. Storage object can be either a localStorage or sessionStorage Object. Syntax: Local Storage Remove Item: localStorage.key(keyname)Session Storage Remove Item: sessionStorage.

HTML | DOM Style wordBreak Property

The DOM Style wordBreak Property is used to set or return the word-break property. The word-break property is used to specify how to break the word when the word is reached at the end of the line. The line breaks in the text can occur in a certain wordBreak property. Syntax: It is used to return the

HTML | DOM Style animationTimingFunction Property

The Style animationTimingFunction property in HTML DOM defines the time of transition between the styles to make transitions smooth. It specifies the speed curve of an animation. Syntax: animation-timing-function: cubic-bezier(n1, n2, n3, n4)|linear |ease|ease-in|ease-out|initial|inherit; Return Val

HTML DOM Node isSupported() Method

The isSupported() method in HTML DOM is used to check the specified feature is supported by the specified node or not. This method is not supported by many browsers. It returns true if the feature is supported else it returns false. Syntax: node.isSupported(feature, version) Note: This method has be

HTML DOM MouseEvent clientX Property

The mouse event clientX property returns the horizontal coordinate (X-axis) of the mouse pointer in relation to the viewport when a mouse event occurs. It captures the mouse's position without considering any scroll offset.Syntax:event.clientXReturn Value: clientX returns the mouse pointer's X-coord

HTML | DOM Style borderImageWidth Property

The Style borderImageWidth property in HTML DOM is used to set or return the width of the border image. Syntax: It returns the borderImageWidth propertyobject.style.borderImageWidthIt is used to set the borderImageWidth propertyobject.style.borderImageWidth = "number|percentage|auto| initial|inherit

HTML DOM Geolocation position Property

The Geolocation position property in HTML DOM is used to return the position of a device on Earth. The returned Coordinates object could be used for various purposes including navigation and tracking the position of the device. Return Value: position.coords: The coordinates object that has all the i