Costumo achar que, ao escrever JavaScript, você precisa usar a altura e a largura da página da web, navegador ou tela para resolver o problema de posicionamento do layout. Você costuma esquecer antes e depois do uso, ou pesquisar on -line e simplesmente resumir você mesmo, para que seja conveniente usá -lo novamente, economizando tempo e esforço.
A largura da área visível da página da web: document.body.clientwidth
A altura da área visível da página da web: document.body.clientHeight
A largura da área visível da página da web: document.body.offsetWidth (incluindo a largura da linha de borda)
A altura da área visível da página da web: document.body.offSethEight (incluindo a largura da linha de borda)
Largura completa do texto da página da web: document.body.scrollwidth (com largura da barra de rolagem)
Altura completa do texto da página da web: document.body.scrolHeight (com altura da barra de rolagem)
A página da web é lançada em um nível alto: document.body.scrolltop
A esquerda da página da web sendo lançada: document.body.scrollleft
Na parte principal da página da web: Window.ScREENTOP
À esquerda do texto principal da página da web: Window.Screenleft
Resolução de tela alta: window.screen.height
Largura da resolução da tela: window.screen.width
Tela Disponível na altura do espaço de trabalho: window.screen.availHeight
Tela disponível Largura do espaço de trabalho: window.screen.availwidth
Posicionamento preciso HTML: rollleft, scrollwidth, Lwidth, offsetwidth
ScrolHeight: obtém a altura de rolagem do objeto.
Rollleft: defina ou obtenha a distância entre o limite esquerdo do objeto e a extremidade mais à esquerda do conteúdo atualmente visível na janela
ScrollTop: defina ou obtenha a distância entre a parte superior do objeto e a parte superior do conteúdo visível na janela
Scrollwidth: obtenha a largura de rolagem do objeto
Offsetheight: obtém a altura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade de coordenadas dos pais OffsetParent
OffsetLeft: obtém a posição esquerda calculada do objeto em relação ao layout ou coordenadas dos pais especificados pela propriedade OffsetParent
OffsetTop: obtém a posição superior calculada do objeto em relação ao layout ou à coordenada pai especificada pela propriedade OffsetTop
Event.ClientX Coordenadas horizontais em relação ao documento
Event.Clienty Coordenadas verticais em relação ao documento
Event.offsetx Coordenadas horizontais em relação ao contêiner
Event.offsety Coordenadas verticais em relação ao contêiner
document.documentElement.scrolltop o valor de rolar verticalmente
event.clientx + document.documentElement.scrolltop em relação à coordenada horizontal do documento + a quantidade de rolagem na direção vertical
Ou seja, as diferenças do Firefox são as seguintes:
Ie6.0, ff1.06+:
A cópia do código é a seguinte:
ClientWidth = Width + Padding
ClientHeight = altura + preenchimento
OffsetWidth = Width + Padding + Border
OffsetHeight = altura + preenchimento + borda
IE5.0/5.5:
A cópia do código é a seguinte:
ClientWidth = Width - Border
ClientHeight = altura - borda
OffsetWidth = Largura
OffsetHeight = altura
Resumo: Há muitas coisas sobre altura e largura. Eu não entendi alguns dos detalhes. Depois de experimentar com eles, alguns deles têm os mesmos valores, por isso é muito confuso e só pode depender da situação.