API web | Propiedad inferior DOMRect

En Web API hay una interfaz DOMRect que tiene una propiedad inferior que nos da la parte inferior del objeto DOMRect. Devuelve y + valor de coordenada de altura o si la altura es negativa, devuelve y .

Sintaxis:

var recX = DOMRect.bottom;

Tipo de devolución:

Double value

Ejemplo 1: Cuando la altura es positiva

<!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>

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 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>

Salida:
Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Navegadores compatibles:

  • 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 *