Los últimos tutoriales de desarrollo web
 

HTML DOM clientWidth Propery

<Elemento de objeto

Ejemplo

Obtener la altura y la anchura de un <div> elemento, incluido el relleno:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

El resultado de txt será:

Height with padding: 270px
Width with padding: 420px
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

La propiedad clientWidth devuelve el ancho visible de un elemento en píxeles, incluido el relleno, pero no la frontera, barra de desplazamiento o margen.

La razón por la cual la "viewable" se especifica la palabra, es porque si el contenido del elemento es más ancha que la anchura real del elemento, esta propiedad sólo devolverá el ancho que es visible (See "More Examples") .

Nota: Para entender esta propiedad, usted debe entender el modelo de caja CSS .

Consejo: Esta propiedad se utiliza a menudo junto con el clientHeight propiedad.

Consejo: Utilice los offsetHeight y offsetWidth propiedades para volver visible la altura y el ancho de un elemento, incluyendo relleno, borde y la barra de desplazamiento.

Consejo: Para añadir barras de desplazamiento a un elemento, utilice el CSS desbordamiento de propiedad.

Esta propiedad es de solo lectura.

Soporte del navegador

Propiedad
clientWidth Sí Sí Sí Sí Sí

Sintaxis

element .clientWidth

Detalles técnicos

Valor de retorno: Un número, que representa la anchura visible de un elemento en píxeles, incluyendo las protecciones
Ejemplos

Más ejemplos

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y offsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

El resultado de txt será:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Inténtalo tú mismo "

Ejemplo

Este ejemplo demuestra la diferencia entre clientHeight / clientWidth y offsetHeight / offsetWidth, cuando añadimos una barra de desplazamiento al elemento:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

El resultado de txt será:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Inténtalo tú mismo "

<Elemento de objeto