Elemento HTML DOM clientWidth
❮ El Objeto ElementoEjemplo
Obtenga la altura y el ancho de "myDIV", incluido el relleno:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Más ejemplos a continuación.
Definición y uso
La clientWidth
propiedad devuelve el ancho visible de un elemento en píxeles, incluido el relleno, pero no el borde, la barra de desplazamiento o el margen.
La clientWidth
propiedad es de solo lectura.
Tutorial:
Ver también:
La propiedad clientHeight del elemento
La propiedad offsetHeight del elemento
La propiedad offsetWidth del elemento
Para agregar barras de desplazamiento a un elemento, use la propiedad de desbordamiento de CSS .
Sintaxis
element.clientWidth
Valor devuelto
Escribe | Descripción |
Número | El ancho visible de un elemento (en píxeles), incluido el relleno. |
La diferencia entre clientHeight/clientWidth y offsetHeight/offsetWidth
Sin barra de desplazamiento:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Con una barra de desplazamiento:
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Compatibilidad con navegador
element.clientWidth
es compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ El Objeto Elemento