ejemplos - ¿Cómo encontrar el ancho de un div usando JavaScript en bruto?

javascript innertext

Question

¿Cómo encuentras el ancho actual de un <div> en una forma compatible con todos los navegadores sin usar una biblioteca como jQuery?

Answer 1

En realidad, no tienes que usar document.getElementById("mydiv") .
Simplemente puedes usar el id del div, como:

var w = mydiv.clientWidth;
o
var w = mydiv.offsetWidth;
etc.

Answer 2

La forma correcta de obtener el estilo computado es esperar hasta que la página se renderice. Se puede hacer de la siguiente manera. Preste atención al tiempo de espera para obtener valores auto .

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById(''__root__''));
        if (style.height == ''auto'') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

Si usas solo

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById(''__root__''));
}

puede obtener valores auto para ancho y alto porque los navegadores no se procesan hasta que se realiza la carga completa.

Answer 3

Puede usar clientWidth o offsetWidth referencia de red de desarrolladores de Mozilla

Sería como:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

o con bordes de ancho:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

Answer 4

También puede buscar el DOM usando ClassName. Por ejemplo:

document.getElementsByClassName("myDiv")

Esto devolverá una matriz. Si hay una propiedad en particular que le interesa. Por ejemplo:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth ahora será igual al ancho del primer elemento en su matriz div.

Answer 5

Todas las respuestas son correctas, pero todavía quiero dar algunas otras alternativas que puedan funcionar.

Si está buscando el ancho asignado (ignorando el relleno, el margen, etc.) que podría usar.

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 y así sucesivamente.

Answer 6

llame al método de abajo en div o body tag onclick = "show (evento);" función show (evento) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert(''right click'');
            gallery.next();
        }
        else
       {
           //   alert(''left click'');
            gallery.prev();
        }


    }

Answer 7

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)