Propiedad clientWidth del DOM HTML

Objeto Elemento de HTML DOM

clientWidthPropiedad de solo lectura que devuelve el ancho visible del elemento (en píxeles), incluyendo el relleno, pero no el borde, el margen de página y la barra de desplazamiento vertical (si existe).

La fórmula de cálculo de clientWidth es la siguiente: CSS width + Relleno CSS-el ancho de la barra de desplazamiento vertical (si existe).

Para entender esta propiedad, debe conocerModelo de caja CSS.

UsooffsetWidthLa propiedad puede devolver el ancho visible del elemento, incluyendo el relleno, el borde y la barra de desplazamiento vertical.

Sintaxis:

element.clientWidth

var　elem　=　document.querySelector("div");
var txt = "Alto que incluye relleno: "　+　elem.clientHeight　+　"px<br>";
txt　+=　"Ancho que incluye relleno:　"　+　elem.clientWidth　+　"px";

Compatibilidad con navegadores

Todos los navegadores admiten completamente el atributo clientWidth:

Detalles técnicos

Más ejemplos

Este ejemplo muestra la diferencia entre clientWidth y offsetWidth:

var　elem　=　document.querySelector("div");
var　txt　=　"Ancho que incluye relleno:　"　+　elem.clientWidth　+　"px<br>";
txt　+=　"Ancho que incluye relleno+Borde:　"　+　elem.offsetWidth　+　"px";

Referencias relacionadas

Referencia de HTML DOM:Atributo offsetWidth de HTML DOM

Referencia de HTML DOM:Atributo scrollWidth de HTML DOM

Referencia de CSS:Atributo overflow de CSS

Objeto Elemento de HTML DOM