API web | Propiedad superior DOMRect

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

Publicación traducida automáticamente

Artículo escrito por DeepakDev y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *