Como obter a altura e largura do documento sem usar jquery

112

Como obter a altura e largura do documento puro javascript ou seja, sem usar jquery.
Eu sei sobre $(document).height()e $(document).width(), mas quero fazer isso emjavascript.

Eu quis dizer a altura e a largura da página.

javascript

— Saritha
fonte

james.padolsey.com/javascript/get-document-height-cross-browser

— Klemen Tušar

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