Web API | DOMRect bottom property
In Web API there is a DOMRect Interface which has a property bottom which gives us the bottom of the DOMRect object. It returns y + height coordinate value or if the height is negative than it returns y.
Syntax:
var recX = DOMRect.bottom;
Return Type :
Double value
Example 1: When the height is positive
<!DOCTYPE html><html> <head> <title> DOMRect bottom property </title> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOMRect bottom property</h2> <button onclick="getDOMRect ();"> Get bottom </button> <p id='DOMRect'></p> </center> </body> <script type="text/javascript"> function getDOMRect() { var myDOMRect = new DOMRect(0, 0, 100, 100); var recbottom = myDOMRect.bottom; document.getElementById( 'DOMRect').innerHTML = recbottom; }</script> </html> |
Output:
Before clicking the button:
After clicking the button:
Example 2: When the height is negative
<!DOCTYPE html><html> <head> <title> DOMRect bottom property </title> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOMRect bottom property</h2> <button onclick="getDOMRect ();">Get bottom</button> <p id='DOMRect'></p> </center> </body> <script type="text/javascript"> function getDOMRect() { var myDOMRect = new DOMRect(0, 0, 100, -100); var recbottom = myDOMRect.bottom; document.getElementById('DOMRect').innerHTML = recbottom; }</script> </html> |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- 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.
