En Web API hay una interfaz DOMRect que tiene una propiedad top que nos da la parte superior del objeto DOMRect. Devuelve el valor de la coordenada y o si la altura es negativa, devuelve y + altura .
Sintaxis:
var recX = DOMRect.top;
Tipo de devolución:
Double value
Ejemplo 1: Cuando la altura es positiva
<!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>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: Cuando la altura es negativa
<!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>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad superior de DOMRect se enumeran a continuación:
- Google Chrome
- Safari 10.1
- Firefox
- Ópera