Como encontrar a largura de uma div usando JavaScript vanilla?

267

Como você encontra a largura atual de uma <div>maneira compatível com vários navegadores sem usar uma biblioteca como o jQuery?

javascript html

— Joda Maki
fonte

104

+1 para o comentário "no jQuery" :) #

— Zlatko

1

Possível duplicata de Noções básicas sobre offsetWidth, clientWidth, scrollWidth e -Height, respectivamente (o que, de fato, foi solicitado muito mais tarde, mas ainda tem uma resposta muito mais elaborada ).

400

document.getElementById("mydiv").offsetWidth

element.offsetWidth (MDC)

— 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