Web API | DOMRect left property
In Web API there is a DOMRect Interface which has a property left which gives us the left of the DOMRect object. It returns x coordinate value or if the width is negative than it returns x + width.
Syntax:
var recX = DOMRect.left;
Return Type:
Double value
Example 1: When the width is positive
<!DOCTYPE html><html> <head> <title> DOMRect left property </title> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOMRect left property</h2> <button onclick="getDOMRect ();"> Get left </button> <p id='DOMRect'></p> </center> </body> <script type="text/javascript"> function getDOMRect() { var myDOMRect = new DOMRect(0, 0, 100, 100); var recleft = myDOMRect.left; document.getElementById( 'DOMRect').innerHTML = recleft; }</script> </html> |
Output:
Before clicking the button:
After clicking the button:
Example 2: When the width is negative
<!DOCTYPE html><html> <head> <title> DOMRect left property </title> </head> <body> <center> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOMRect left property</h2> <button onclick="getDOMRect ();"> Get left </button> <p id='DOMRect'></p> </center> </body> <script type="text/javascript"> function getDOMRect() { var myDOMRect = new DOMRect(0, 0, -100, 100); var recleft = myDOMRect.left; document.getElementById( 'DOMRect').innerHTML = recleft; }</script> </html> |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browsers supported by DOMRect left property are listed below:
- Google Chrome
- Safari 10.1
- Firefox
- Opera
.png)
