objeto de tela
Obtenha a altura e a largura da tela (resolução)
screen.width // wide screen.height // high screen.availwidth // a tela pode ser usada para subtrair o valor após a altura do componente do sistema.
objeto de janela
Obtenha a posição da janela e o tamanho
Window.ScReEntop // A distância da parte superior da janela até a parte superior da janela da tela.Screenleft // A distância do lado esquerdo da janela até o lado esquerdo da janela da tela.innerwidth // a largura do ponto de vista no alerta da janela (Window.innerWidth); // Chrome 1366 FF 1366 IE 1366 Window.innerHeight // A altura do ponto de vista na janela esse valor está relacionado a fatores como se o navegador exibe a barra de menus, etc. Alert (Window.innerHeight); // Chrome 643 FF 657 IE 673Window.outerwidth // A largura da própria janela do navegador (alerta de largura da área de área visível + largura da borda do navegador) (janela.outerwidth); // Chrome 1366 FF 1382 ou seja, 1382 // indica que, quando o Chrome é maximizado, a janela do navegador não tem largura da borda e, quando não é maximizado, há uma largura da borda de 8px // FF e o próprio alert, para baixo, para baixo e direita. // Chrome 728 FF 744 IE 744
objeto de elemento
Antes de apresentar as várias alturas e larguras dos objetos de elemento, é necessário explicar o modelo da caixa.
Modelo de caixa padrão tamanho da caixa: caixa de conteúdo;
largura de caixa = 2*margem + 2*borda + 2*preenchimento + widthboxHeight = 2*margem + 2*borda + 2*preenchimento + altura
Quando nenhuma barra de rolagem aparece
corpo {margem: 0;}#Demo {largura: 100px; Altura: 100px; preenchimento: 10px; fronteira: 20px; margem: 30px; Background-color: vermelho;} <div id = "Demo"> 123456789 123456789 </div>Largura do cliente: retorna a largura visível do conteúdo da página (excluindo fronteiras, margens ou barras de rolagem)
ClientHeight: Retorna a altura visível do conteúdo na página (excluindo fronteiras, margens ou barras de rolagem)
ClientWidth = 2*preenchimento + largura - scrollbarwidth console.log (document.getElementById ('demonstração'). // 120 Neste momento, scrollBarwidth = 0clientHeight = 2*preenchimento + altura - scrollbarheight console.log (document.getElementById ('demonstração'). ClientHeight); // 120 Neste momento, scrollbarwidth = 0OffsetWidth: retorna a largura do elemento, incluindo borda e preenchimento, mas não inclui margens
Offsetheight: Retorna a altura do elemento, incluindo bordas e preenchimentos, mas não inclui margens
OffsetWidth = 2*borda + 2*preenchimento + width console.log (document.getElementById ('demonstração').OffsetLeft: obtém a posição esquerda calculada do objeto em relação ao layout ou à coordenada pai especificada pela propriedade Offsetleft
OffsetTop: obtém a posição superior calculada do objeto em relação ao layout ou à coordenada pai especificada pela propriedade OffsetTop
console.log (document.getElementById ('Demo'). Offsetleft) //30console.log(document.getElementById('Demo').offsettop) // 30Quando uma barra de rolagem aparece
corpo {margem: 0; preenchimento: 20px; Largura: 1000px; Altura: 500px;} <div id = "Demo"> 123456789123456789 </div>Lwidth: retorna toda a largura do elemento (incluindo casas ocultas com barras de rolagem)
ScrolHeight: Retorna a altura de todo o elemento (incluindo locais ocultos com barras de rolagem)
scrollwidth = 2*preenchimento + width console.log (document.body.scrollwidth) // 1040scrolHeight = 2*preenchimento + width console.log (document.body.scrolheight) // 540
ScrollTop: A altura do elemento oculta o conteúdo ao deslizar para baixo no bloco de rolagem. Quando não está definido, o padrão é 0 e seu valor muda à medida que o bloco de rolagem rolagem
ScrollLeft: A largura do elemento oculta o conteúdo ao deslizar o bloco de rolagem para a direita. Quando não está definido, o padrão é 0 e seu valor muda à medida que o bloco de rolagem rolagem
objeto de evento
O objeto de evento representa o status de um evento, como o elemento em que o evento ocorre, o status da tecla do teclado, a posição do mouse e o status do botão do mouse.
Event.Pagex: Em relação às coordenadas de toda a página, o canto superior esquerdo da página é a distância horizontal da origem da coordenada até o ponto em que o mouse está localizado (o IE8 não o suporta)
Event.Pagey: Em relação às coordenadas de toda a página, o canto superior esquerdo da página é a distância vertical da origem da coordenada até o ponto em que o mouse está localizado (não suportado pelo IE8)
Event.ClientX: As coordenadas da área visual relativa, usando o canto superior esquerdo da área visual do navegador como a distância horizontal da origem das coordenadas até o ponto em que o mouse está localizado, usando o canto superior esquerdo da área visual do navegador
evento
Event.Screenx: Em relação às coordenadas da tela do computador, a distância horizontal da origem coordenada até o ponto em que o mouse está localizado, usando o canto superior esquerdo da tela como a distância horizontal do ponto de origem coordenada para o ponto em que o mouse está localizado
Event.Screeny: Em relação às coordenadas da tela do computador, a distância vertical da origem coordenada até o ponto em que o mouse está localizado, usando o canto superior esquerdo da tela como a distância vertical do ponto de origem coordenada até o ponto em que o mouse está localizado
Event.OffsetX: Em relação às suas próprias coordenadas, a distância horizontal da origem coordenada do canto superior esquerdo de seu próprio estofamento até o ponto em que o mouse está localizado é baseado em sua distância horizontal da origem coordenada das coordenadas ao ponto em que o mouse está localizado
Event.offsety: Em relação às suas próprias coordenadas, a distância horizontal da origem coordenada do canto superior esquerdo de seu próprio estofamento até o ponto em que o mouse está localizado é baseado em sua distância horizontal da origem coordenada.
O resumo acima dos métodos de obtenção de várias alturas e larguras e posições das páginas da Web em JavaScript é o conteúdo inteiro compartilhado pelo editor. Espero que possa lhe dar uma referência e espero que você apoie mais o wulin.com.