Skip to content
Related Articles

Related Articles

Improve Article

Web API | DOMRect top property

  • Last Updated : 21 Aug, 2019

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

Syntax:

var recX = DOMRect.top;

Return Type:

Double value

Example 1: When the height is positive




<!DOCTYPE html>
<html>
  
<head>
  
    <title>
        DOMRect top property
    </title>
  
</head>
  
<body>
    <center>
  
        <h1 style="color:green;"
        GeeksForGeeks 
        </h1>
  
        <h2>DOMRect top property</h2>
        <button onclick="getDOMRect ();">
          Get top
      </button>
        <p id='DOMRect'></p>
    </center>
  
</body>
  
<script type="text/javascript">
    function getDOMRect() {
        var myDOMRect = new DOMRect(0, 0, 100, 100);
        var rectop = myDOMRect.top;
  
        document.getElementById(
          'DOMRect').innerHTML = rectop;
  
    }
</script>
  
</html>

Output:
Before clicking the button:



After clicking the button:

Example 2: When the height is negative




<!DOCTYPE html>
<html>
  
<head>
  
    <title>
        DOMRect top property
    </title>
  
</head>
  
<body>
    <center>
  
        <h1 style="color:green;"
                GeeksForGeeks 
            </h1>
  
        <h2>DOMRect top property</h2>
        <button onclick="getDOMRect ();">
          Get top
      </button>
        <p id='DOMRect'></p>
    </center>
  
</body>
  
<script type="text/javascript">
    function getDOMRect() {
        var myDOMRect = new DOMRect(0, 0, 100, -100);
        var rectop = myDOMRect.top;
  
        document.getElementById('DOMRect').innerHTML = rectop;
  
    }
</script>
  
</html>

Output:
Before clicking the button:

After clicking the button:

Supported Browsers: The browsers supported by DOMRect top property are listed below:

  • Google Chrome
  • Safari 10.1
  • Firefox
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :