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 das bordas)
A altura da área visível da página da web: document.body.offsetHeight (incluindo a largura da borda)
Largura do texto completo do corpo da página da web: document.body.scrollWidth
Altura do texto completo do corpo da página da web: document.body.scrollHeight
A altura da página da web que está sendo rolada: document.body.scrollTop
O lado esquerdo da página da web que está sendo rolada: document.body.scrollLeft
No corpo principal da página da web: window.screenTop
A parte esquerda do corpo principal da página da web: window.screenLeft
Alta resolução de tela: window.screen.height
A largura da resolução da tela: window.screen.width
Altura da área de trabalho disponível na tela: window.screen.availHeight
Largura da área de trabalho disponível na tela: window.screen.availWidth
Posicionamento preciso do HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: obtém a altura de rolagem do objeto.
scrollLeft: Define ou obtém a distância entre a borda esquerda do objeto e a extremidade esquerda do conteúdo atualmente visível na janela
scrollTop: Define ou obtém a distância entre o topo do objeto e o topo do conteúdo visível na janela
scrollWidth: obtém a largura de rolagem do objeto
offsetHeight: obtém a altura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade offsetParent da coordenada pai.
offsetLeft: obtém a posição esquerda calculada do objeto em relação ao layout ou à coordenada pai especificada pela propriedade offsetParent.
offsetTop: obtém a posição superior calculada do objeto em relação ao layout ou às coordenadas pai especificadas pela propriedade offsetTop
coordenada horizontal event.clientX relativa ao documento
coordenada vertical event.clientY relativa ao documento
coordenada horizontal event.offsetX relativa ao contêiner
coordenada vertical event.offsetY relativa ao contêiner
valor document.documentElement.scrollTop para rolagem vertical
event.clientX+document.documentElement.scrollTop A coordenada horizontal relativa ao documento + a quantidade de rolagem vertical
As diferenças entre o IE e o FireFox são as seguintes:
IE6.0, FF1.06+:
clientWidth = largura + preenchimento
clientHeight = altura + preenchimento
offsetWidth = largura + preenchimento + borda
offsetHeight = altura + preenchimento + borda
IE5.0/5.5:
clienteLargura = largura - borda
clientHeight = altura - borda
offsetWidth = largura
offsetHeight = altura
(É preciso mencionar: o atributo margin em CSS não tem nada a ver com clientWidth, offsetWidth, clientHeight e offsetHeight)
Largura da área visível da página da web: document.body.clientWidth
A altura da área visível da página web: document.body.clientHeight
A largura da área visível da página da web: document.body.offsetWidth (incluindo a largura das bordas)
A altura da área visível da página da web: document.body.offsetHeight (incluindo a altura da borda)
Largura do texto completo do corpo da página da web: document.body.scrollWidth
Altura do texto completo do corpo da página da web: document.body.scrollHeight
A altura em que a página da web é rolada: document.body.scrollTop
O lado esquerdo da página da web que está sendo rolada: document.body.scrollLeft
No corpo principal da página da web: window.screenTop
A parte esquerda do corpo principal da página da web: window.screenLeft
A altura da resolução da tela: window.screen.height
A largura da resolução da tela: window.screen.width
Altura da área de trabalho disponível na tela: window.screen.availHeight
Largura da área de trabalho disponível na tela: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
Pontos técnicos
O código nesta seção usa principalmente algumas propriedades do objeto Document em relação à janela. As principais funções e o uso dessas propriedades são os seguintes.
Para obter o tamanho da janela, diferentes propriedades e métodos precisam ser usados para diferentes navegadores: para detectar o tamanho real da janela, você precisa usar as propriedades da Janela no Netscape, no IE, você precisa se aprofundar no; Documento para detectar o corpo; No ambiente DOM, se você deseja obter o tamanho da janela, deve prestar atenção ao tamanho do elemento raiz, não ao elemento.
A propriedade innerWidth do objeto Window contém a largura interna da janela atual. A propriedade innerHeight do objeto Window contém a altura interna da janela atual.
O atributo body do objeto Document 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 o documento HTML está localizado.
Implementar código
Copie o código do código da seguinte forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<title>Redimensione a janela do navegador</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<corpo>
<h2 align="center">Redimensione a janela do navegador</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--Mostrar o tamanho real da janela do navegador-->
Altura real da janela do navegador: <input type="text" name="availHeight" size="4"><br>
Largura real da janela do navegador: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="texto/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //Função: Obter dimensões
{
//Obtém a largura da janela
if (janela.innerWidth)
winWidth = janela.innerWidth;
senão if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//Obtém a altura da janela
se (janela.innerHeight)
winHeight = janela.innerHeight;
senão if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//Detecta o corpo indo fundo no Documento para obter o tamanho da janela
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//Envia os resultados para duas caixas de texto
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value= winWidth;
}
encontrarDimensões();
//Chama a função e obtém o valor
window.onresize=findDimensões;
//-->
</script>
</body>
</html>
Interpretação do programa fonte
(1) O programa primeiro cria um formulário que contém duas caixas de texto para exibir a largura e altura atuais da janela, e seus valores mudam conforme o tamanho da janela muda.
(2) No código JavaScript subsequente, duas variáveis winWidth e winHeight são definidas primeiro para salvar os valores de altura e largura da janela.
(3) Em seguida, na função findDimensions(), use window.innerHeight e window.innerWidth para obter a altura e largura da janela, e salve-as nas duas variáveis mencionadas.
(4) Em seguida, detecte o corpo aprofundando-se no Documento, obtenha o tamanho da janela e armazene-o nas duas variáveis mencionadas acima.
(5) Ao final da função, acessando os elementos do formulário por nome, os resultados são exibidos em duas caixas de texto.
(6) Ao final do código JavaScript, conclua toda a operação chamando a função findDimensions ().