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
Texto completo da página da web: Document.body.scrolHeight
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+:
ClientWidth = Width + Padding
ClientHeight = altura + preenchimento
OffsetWidth = Width + Padding + Border
OffsetHeight = altura + preenchimento + borda
IE5.0/5.5 :
ClientWidth = Width - Border
ClientHeight = altura - borda
OffsetWidth = Largura
OffsetHeight = altura
(Deve -se mencionar que o atributo de margem no CSS não tem nada a ver com largura de cliente, compensação, altura do cliente e fora do peso)
－－－－－－－－－－－－－－－－－－－
Destaques técnicos
O código nesta seção usa principalmente algumas propriedades do objeto de documento sobre a janela. As principais funções e o uso dessas propriedades são as seguintes.
Para obter o tamanho da janela, diferentes propriedades e métodos precisam ser usados para diferentes navegadores: para detectar o tamanho verdadeiro da janela, você precisa usar os atributos da janela em Netscape; para detectar o corpo no IE; Para obter o tamanho da janela, você precisa prestar atenção ao tamanho do elemento raiz, não ao elemento.
A propriedade Innerwidth do objeto da janela contém a largura interna da janela atual. A propriedade InnerHeight do objeto da janela contém a altura interna da janela atual.
O atributo corporal do objeto de documento corresponde à tag do documento HTML. A propriedade DocumentElement do objeto Document representa o nó raiz do documento HTML.
document.body.clientHeight representa a altura atual da janela onde o documento HTML está localizado. document.body.clientwidth representa a largura atual da janela onde reside o documento HTML.
Uma pequena pesquisa sobre como obter o tamanho das janelas visíveis em vários navegadores.
No meu teste local: pode ser usado no IE, Firefox e Opera
document.body.clientwidth
Document.body.clientHeight pode ser obtido, é muito simples e conveniente.
No projeto da empresa: a ópera ainda é usada
document.body.clientwidth
document.body.clientHeight
Mas ou seja, uso do Firefox
document.documentElement.clientwidth
document.documentElement.clientHeight
Acontece que o padrão W3C está causando problemas http://www.w3.org/tr/xhtml1/dtd/xhtml1-ransitional.dtd ">
Se você adicionar esta linha à página
No IE: document.body.clientWidth ==> Largura do objeto do corpo
document.body.clientHeight ==> Altura do objeto corporal
document.documentElement.clientWidth ==> Largura da área visível
document.documentElement.clientHeight ==> Altura da área visível
Em Firefox: document.body.clientwidth ==> Largura do objeto do corpo
document.body.clientHeight ==> Altura do objeto corporal
document.documentElement.clientWidth ==> Largura da área visível
document.documentElement.clientHeight ==> Altura da área visível?
Na Opera: Document.body.clientWidth ==> Largura da área visível
document.body.clientHeight ==> Altura da área visível
document.documentElement.clientWidth ==> Página Largura do objeto (ou seja, largura do objeto do corpo mais largura da margem) document.documentElement.clientHeight ==> Página altura do objeto (ou seja, altura do objeto do corpo mais altura da margem)
Se não houver padrão para W3C,
Então, ou seja, é: document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
Firefox é: document.documentElement.clientWidth ==> Página Largura do objeto (ou seja, largura do objeto corporal mais largura da margem)
document.documentElement.clientHeight ==> Página altura do objeto (ou seja, altura do objeto corporal mais altura da margem)
Opera é: document.documentElement.clientWidth ==> Página Largura do objeto (ou seja, largura do objeto corporal mais largura da margem)
document.documentElement.clientHeight ==> Página altura do objeto (ou seja, altura do objeto corporal mais altura da margem)
É realmente um aborrecimento. De fato, da perspectiva do design e desenvolvimento do front-end, é melhor ter menos objetos e métodos do que não usar os padrões mais recentes. Mas se você não conseguir acompanhar a tendência, nunca será um designer sênior, por isso ainda devemos entender e dominar esse conhecimento.