HTML DOM clientWidth Propiedad

元素对象参考手册Objeto del elemento

Ejemplo

Obtener el ancho del elemento div, incluyendo el relleno (padding):

var elmnt = document.getElementById("myDIV"); var txt = "La altura del elemento div, incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "El ancho del elemento div, incluyendo el relleno (padding):" + elmnt.clientWidth + "px";

Pruébalo »

Definición y uso

La propiedad clientWidth es una propiedad de solo lectura que devuelve el ancho en píxeles del elemento. El ancho incluye el relleno (padding), pero no incluye el borde (border), el margen (margin) ni la barra de desplazamiento. Es un número entero, en píxeles px.

El valor de la propiedad clientWidth de los elementos en línea y de los elementos sin estilo CSS es 0.

Nota:Para entender esta propiedad, consulteModelo de caja CSS。

Consejo:Esta propiedad se usa generalmente junto con laclientHeightpropiedad.

Consejo:Use la offsetHeightyoffsettWidthpropiedad para obtener la altura y el ancho visibles del elemento, incluyendo el relleno (padding) y el borde (border).

Consejo:Para añadir una barra de desplazamiento al elemento, puede usar laoverflowpropiedad.

Esta es una propiedad de solo lectura.

Soporte del navegador

Propiedad
clientWidth Yes Yes Yes Yes Yes

Sintaxis

element.clientWidth

Detalles técnicos

Valor de retorno: Devuelve un número entero que representa el ancho en píxeles del elemento.

Más ejemplos

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding) y el borde (border):" + elmnt.offsetWidth + "px";

Pruébalo »

Ejemplo

El siguiente ejemplo demuestra la diferencia entre las propiedades clientHeight/clientWidth y offsetHeight/offsetWidth después de agregar una barra de desplazamiento al elemento:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Información de estilo de div:</b><br>"; txt += "Altura incluyendo el relleno (padding):" + elmnt.clientHeight + "px<br>"; txt += "Altura incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetHeight + "px<br>"; txt += "Ancho incluyendo el relleno (padding):" + elmnt.clientWidth + "px<br>"; txt += "Ancho incluyendo el relleno (padding), el borde (border) y la barra de desplazamiento:" + elmnt.offsetWidth + "px";

Pruébalo »

元素对象参考手册Objeto del elemento

Otras extensiones