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