Como encontrar a largura de uma div usando JavaScript vanilla?

Respostas:

400 
document.getElementById("mydiv").offsetWidth
Andy E
fonte
8
Que, ou cientWidth, embora eu não saiba a diferença real.
JCOC611
123
offsetWidthinclui largura da borda, clientWidthnão.
precisa saber é o seguinte
1
Quando myDiv não tinha regra CSS, mas tinha "width" e "height" definidas na tag, offsetWidth retornava a largura pai. Não é um problema, eu apenas adicionei a regra CSS e funcionou bem.
Rob
offsetHeight sempre zero no IE11
nim
4
@nim se sua div tiver display: noneou não fizer parte do documento, ela sempre terá altura de deslocamento zero.
Andy E
38

Você pode usar clientWidthou offsetWidth referência de rede de desenvolvedor Mozilla

Seria como:

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

ou com largura das bordas:

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

Todas as respostas estão corretas, mas ainda quero dar outras alternativas que possam funcionar.

Se você estiver procurando pela largura atribuída (ignorando preenchimento, margem e assim por diante), poderá usar.

getComputedStyle(element).width; //returns value in px like "727.7px"

O getComputedStyle permite acessar todos os estilos desses elementos. Por exemplo: padding, paddingLeft, margin, border-top-left-ray e assim por diante.

Alex Flexlex Waldboth
fonte
4

Você também pode pesquisar o DOM usando o ClassName. Por exemplo:

document.getElementsByClassName("myDiv")

Isso retornará uma matriz. Se houver uma propriedade específica em que você esteja interessado. Por exemplo:

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

divWidth agora será igual à largura do primeiro elemento em sua matriz div.

user3386050
fonte
2

Na verdade, você não precisa usar document.getElementById("mydiv") .
Você pode simplesmente usar o ID da div, como:

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

Ari
fonte
1

Outra opção é usar a função getBoundingClientRect. Observe que getBoundingClientRect retornará um ret vazio se a exibição do elemento for 'none'.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}
user4617883
fonte
0

chame o método abaixo na tag div ou body onclick = "show (event);" função 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();
        }


    }
Amrik
fonte
0

A maneira correta de obter o estilo calculado está aguardando até que a página seja renderizada. Isso pode ser feito da seguinte maneira. Preste atenção ao tempo limite para obter autovalores.

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(); };

Se você usar apenas 

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

você pode obter autovalores de largura e altura porque os navegadores não são renderizados até que a carga total seja executada.

Siarhei Kuchuk
fonte