Web API DOMRect top property

In Web API there is a DOMRect Interface which has a property top that gives us the top of the DOMRect object. It returns the y coordinate value or if the height is negative then it returns y + height.

Syntax:

let recX = DOMRect.top;

Return Type:

Double value

Example 1: When the height is positive

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>

        DOMRect top property

    </title>

</head>
 
<body>

    <h1 style="color:green;">

        GeeksForGeeks

    </h1>

    <h2>DOMRect top property</h2>

    <button onclick="getDOMRect ();">

        Get top

    </button>

    <p id='DOMRect'></p>

    <script type="text/javascript">

        function getDOMRect() {

            let myDOMRect = new DOMRect(0, 0, 100, 100);

            let rectop = myDOMRect.top;

            document.getElementById(

                'DOMRect').innerHTML = rectop;

        }

    </script>

</body>
 
</html>

Output:

Example 2: When the height is negative

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>

        DOMRect top property

    </title>

</head>
 
<body>

    <h1 style="color:green;">

        GeeksForGeeks

    </h1>

    <h2>DOMRect top property</h2>

    <button onclick="getDOMRect ();">

        Get top

    </button>

    <p id='DOMRect'></p>

    <script type="text/javascript">

        function getDOMRect() {

            let myDOMRect = new DOMRect(0, 0, 100, -100);

            let rectop = myDOMRect.top;

            document.getElementById('DOMRect').innerHTML = rectop;

        }

    </script>

</body>

</html>