¿Cómo encontrar el ancho de un div usando JavaScript básico?
¿Cómo se puede encontrar el ancho actual de a <div>de forma compatible con todos los navegadores sin utilizar una biblioteca como jQuery?
Puede utilizar clientWidthla offsetWidth referencia de la red de desarrolladores de Mozilla
Sería como:
document.getElementById("yourDiv").clientWidth; // returns number, like 728
o con ancho de bordes:
document.getElementById("yourDiv").offsetWidth; // 728 + borders width
Todas las respuestas son correctas, pero aún quiero ofrecer otras alternativas que pueden funcionar.
Si está buscando el ancho asignado (ignorando el relleno, el margen, etc.), puede utilizarlo.
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle le permite acceder a todos los estilos de esos elementos. Por ejemplo: padding, paddingLeft, margin, border-top-left-radius, etc.
Otra opción es utilizar la función getBoundingClientRect. Tenga en cuenta que getBoundingClientRect devolverá un rect vacío si la visualización del elemento es "ninguna".
var elem = document.getElementById("myDiv");
if(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect.width);
}
