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 coordenada dos pais especificada 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.
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; o corpo;
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.
Código de implementação <!! - - - - - - - - - - - - - - ― - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ``
A cópia do código é a seguinte:
<!
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Por favor, ajuste a janela do navegador </ititle>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
</head>
<Body>
<h2 align = "Center"> Ajuste o tamanho da janela do navegador </h2> <hr>
<form action = "#" método = "get" name = "form1" id = "form1">
<! Mostre o tamanho real da janela do navegador>
A altura real da janela do navegador: <input type = "text" name = "disponível" size = "4"> <br>
A largura real da janela do navegador: <input type = "text" name = "updwidth" size = "4"> <br>
</morm>
<script type = "text/javascript">
<!
var winWidth = 0;
var winheight = 0;
função findDimensions () // função: obtenha as dimensões
{
// Obtenha a largura da janela
if (window.innerwidth)
WinWidth = Window.innerWidth;
caso contrário, if ((document.body) && (document.body.clientwidth))
winWidth = document.body.clientWidth;
// Obtenha a altura da janela
if (window.innerHeight)
winHeight = window.innerHeight;
caso contrário, if ((document.body) && (document.body.clientHeight))
Winheight = document.body.clientHeight;
// Clique no tamanho da janela detectando o corpo profundamente dentro do documento para obter o tamanho do corpo
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
Winheight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// O resultado é emitido para duas caixas de texto
document.form1.availHeight.Value = winheight;
document.form1.availwidth.value = winWidth;
}
findDimensions ();
// chamando a função para obter o valor
window.OnResize = FindImensions;
///
</script>
</body>
</html>
Interpretação do programa de origem
(1) O programa primeiro cria um formulário contendo duas caixas de texto para exibir a largura e a altura atuais da janela, e seu valor mudará com a alteração do tamanho da janela.
(2) No código JavaScript subsequente, duas variáveis WinWidth e WinEight são definidas pela primeira vez para economizar os valores de altura e largura da janela.
(3) Então, na função findDimensions (), use window.innerHeight e window.innerwidth para obter a altura e a largura da janela e salve as duas nas duas variáveis acima.
(4) Então, entrando profundamente no documento, detectando o corpo, obtendo o tamanho da janela e armazenando -o nas duas variáveis acima.
(5) No final da função, o resultado é emitido para duas caixas de texto acessando o elemento de formulário por nome.
(6) No final do código JavaScript, preencha toda a operação chamando a função findDimensions ().