Como obter a altura e largura do documento sem usar jquery

Respostas:

119 
var height = document.body.clientHeight;
var width = document.body.clientWidth;

Confira: este artigo para uma melhor explicação.

Damb
fonte
9
Este não é um navegador cruzado. Você deveria ter testado isso antes de postar.
12
@Iwazaru Obrigado por apontar isso. Parece que esta resposta de 4 anos não é à prova de balas :)
Damb
2
Parece que é cross-browser .
MAChitgarha
Se um site tem uma borda, ele diminui a largura com esta solução, mas não com a solução jQuery. É improvável que seja uma fronteira do corpo, mas vale a pena conhecer. window.innerWidthresolve isso
BritishSam
Isso retorna a altura da janela do navegador (se você ajustar a altura do navegador, ela muda), não a altura do conteúdo / página da web.
Radmation
56

Mesmo o último exemplo fornecido em http://www.howtocreate.co.uk/tutorials/javascript/browserwindow não está funcionando no modo Quirks. Mais fácil de encontrar do que eu pensava, esta parece ser a solução (extraída do código jquery mais recente):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

apenas substitua Width por "Height" para obter Height.

Dan
fonte
1
Esta deve ser a resposta correta. clientWidth nem sempre tem o valor correto.
Wildhammer
problema com clientWidth é que ele é apenas visível. scrollWidth inclui coisas que vazam da tela. pelo menos, isso é verdade para meus experimentos do Chrome em 2019.
StayCool
@StayCool parece que o jQuery mais recente ainda está usando este método para o cálculo da altura / largura do documento e dá o mesmo resultado que $(document).width(). Talvez você esteja atrás de algo como $(window).width()JS puro seria apenas document.documentElement["clientWidth"]em navegadores modernos.
Dan
38

Esta é uma solução para vários navegadores:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
Hamid
fonte
Esta é uma coisa segura e precisa a se fazer
Nan Zhou de
1
isso está retornando a altura e largura da janela, não a altura e largura do documento
Michael
25

Você deve usar getBoundingClientRectporque normalmente funciona em vários navegadores e oferece precisão de subpixel no retângulo de limites.

elem.getBoundingClientRect()
Erik Aigner
fonte
1
para aqueles que estão se perguntando sobre suporte: caniuse.com/#feat=getboundingclientrect
Mike Gleason jr Couturier
isso retorna uma altura de 0 quando eu usei em document.body
Michael
Provavelmente porque seu corpo tem altura 0. Se você não alterar o tipo de exibição, é o caso por padrão. Verifique no inspetor DOM.
Erik Aigner
11

Obtenha o tamanho do documento sem jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

E use-o se precisar do tamanho da tela

screen.width
screen.height
tamasviktor
fonte
8

Você também pode tentar:

document.body.offsetHeight
document.body.offsetWidth
Mihai Frentiu
fonte
1
Tenha cuidado ao usá-los em eventos de redimensionamento de janela. eles têm que calcular a altura e largura, o que leva um tempo.
Milhas de
8

Isso deve funcionar para todos os navegadores / dispositivos:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
user937284
fonte
window.innerWidth é o único que também está correto quando as ferramentas de desenvolvimento são abertas no Chrome
Alex
4

Se você deseja obter a largura total da página, incluindo estouro, use document.body.scrollWidth.

Arlen Beiler
fonte
Esta solução é cross-browser?
retorno de chamada de
1

Como descobrir facilmente a largura e a altura do documento?

em HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

em javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Você pode atualizar isso em cada evento de redimensionamento de janela, se necessário.

Joshy Francis
fonte
0

windowé a janela inteira do aplicativo do navegador. documenté a página da web exibida que está realmente carregada.

window.innerWidthe window.innerHeightlevará as barras de rolagem em consideração, que podem não ser o que você deseja.

document.documentElementé a página da web completa sem a barra de rolagem superior. document.documentElement.clientWidthretorna o tamanho da largura do documento sem barra de rolagem y. document.documentElement.clientHeightretorna o tamanho da altura do documento sem barra de rolagem x.

user3798451
fonte