Atributo clientWidth del elemento HTML DOM

Definición y uso

clientWidth El atributo devuelve el ancho visual del elemento, incluyendo los márgenes internos, pero no incluye los bordes, la barra de desplazamiento o los márgenes externos, en píxeles.

clientWidth El atributo es de solo lectura.

Vea también:Tutoriales sobre el modelo de cuadro CSS

Vea también:

Atributo clientHeight

Atributo clientTop

Atributo clientLeft

Atributo offsetHeight

Atributo offsetWidth

Para agregar una barra de desplazamiento al elemento, utilice Atributo overflow de CSS.

Ejemplo

Ejemplo 1

Obtener la altura y anchura de "myDIV", incluyendo los márgenes internos:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Intente hacerlo usted mismo

Ejemplo 2

Ejemplo 2: Diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth

Sin barra de desplazamiento:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Intente hacerlo usted mismo

Con barra de desplazamiento:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Intente hacerlo usted mismo

Sintaxis

element.clientWidth

Valor de retorno

Tipo Descripción
Números Ancho visual del elemento (en píxeles), incluyendo los márgenes internos.

Compatibilidad del navegador

Todos los navegadores lo admiten element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte