offsetWidth, clientWidth, scrollWidth y Height, respectivamente en CSS

offsetWidth: devuelve el ancho de un elemento HTML, incluido el relleno, el borde y la barra de desplazamiento en píxeles, pero no incluye el ancho del margen. Si el elemento no tiene ningún cuadro de diseño asociado, devuelve cero.

Sintaxis:

element.offsetWidth

clientWidth: devuelve el ancho de un elemento HTML, incluido el relleno en píxeles, pero no incluye el margen, el borde ni el ancho de la barra de desplazamiento.

Sintaxis:

element.clientWidth

scrollWidth: devuelve el ancho del contenido encerrado en un elemento html, incluido el relleno, pero no el margen, el borde y la barra de desplazamiento.

Sintaxis:

element.scrollWidth

Ejemplo: Este ejemplo ilustra el uso de las propiedades offsetWidth, clientWidth y scrollWidth.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Use of offsetWidth, ClientWidth
        and scrollWidth property
    </title>
  
    <style>
        #box {
            height: 100px;
            width: 130px;
            border: 5px black;
            padding: 10px;
            margin: 5px;
            overflow: scroll; 
            background-color: aqua;
        }
    </style>
</head>
  
<body>
    <div id="box">
        It is an example of offsetWidth, ClientWidth
        and scrollWidth property
    </div>
      
    <p>Click on button to get result</p>
      
    <button onClick="display()">
        Click Here!
    </button> 
      
    <div id="result"></div>
      
    <!-- Script to uses offsetWidth, ClientWidth
        and scrollWidth property -->
    <script>
        function display() {
            var ele = document.getElementById("box");
            var osw = ele.offsetWidth;
            var sw = ele.scrollWidth;
            var cw = ele.clientWidth;
              
            document.getElementById("result").innerHTML
                = "offsetWidth: " + osw + "px<br>clientWidth: "
                  + cw + "px<br>scrollWidth : " + sw + "px" ;
        }
    </script>
</body>
  
</html>                    

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

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

offsetHeight: devuelve la altura de un elemento HTML, incluido el relleno, el borde y la barra de desplazamiento en píxeles, pero no incluye la altura del margen. Si el elemento no tiene ningún cuadro de diseño asociado, devuelve cero.

Sintaxis:

element.offsetHeight

clientHeight: devuelve la altura de un elemento HTML, incluido el relleno en píxeles, pero no incluye la altura del margen, el borde y la barra de desplazamiento.

Sintaxis:

element.clientHeight

scrollHeight: devuelve la altura del contenido encerrado en un elemento html, incluido el relleno, pero no el margen, el borde y la barra de desplazamiento.

Sintaxis:

element.scrollHeight

Ejemplo: Este ejemplo ilustra el uso de las propiedades offsetHeight, clientHeight y scrollHeight.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Use of offsetHeight, ClientHeight
        and scrollHeight property
    </title>
  
    <style>
        #box {
            height: 100px;
            width: 150px;
            border: 5px black;
            padding: 10px;
            margin: 5px;
            overflow: scroll; 
            background-color: aqua;
        }
    </style>
</head>
  
<body>
    <div id="box">
        It is an example of offsetHeight, ClientHeight
        and scrollHeight property
    </div>
  
    <p>Click on button to get result</p>
      
    <button onClick="display()">
        Click Here!
    </button> 
      
    <div id="result"></div>
  
    <script>
        function display() {
            var ele = document.getElementById("box");
            var osw = ele.offsetHeight;
            var sw = ele.scrollHeight;
            var cw = ele.clientHeight;
              
            document.getElementById("result").innerHTML
                = "offsetHeight: " + osw + "px<br>clientHeight: "
                  + cw + "px<br>scrollHeight: " + sw + "px" ;
        }
    </script>
</body>
  
</html>                    

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

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

Publicación traducida automáticamente

Artículo escrito por Yash_Maheshwari 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 *