offsetTop
Obtém a posição superior calculada do objeto em relação ao layout ou às coordenadas pai especificadas pela propriedade offsetParent.
deslocamento à esquerda
Obtém a posição esquerda calculada do objeto em relação ao layout ou às coordenadas pai especificadas pela propriedade offsetParent.
deslocamentoAltura
Obtém a altura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade offsetParent.
IE e Opera acreditam que offsetHeight = clientHeight + barra de rolagem + borda.
NS e FF consideram offsetHeight a altura real do conteúdo da página da web, que pode ser menor que clientHeight.
deslocamentoLargura
Obtém a largura do objeto em relação ao layout ou à coordenada pai especificada pela propriedade offsetParent.
offsetParent
Obtém uma referência ao objeto contêiner que define as propriedades offsetTop e offsetLeft do objeto.
altura do cliente
Obtém a altura de um objeto, sem contar margens, bordas, barras de rolagem ou preenchimento que possam ser aplicados ao objeto.
Todos não têm objeções ao clientHeight. Todos pensam que é a altura da área visível do conteúdo, o que significa a altura da área onde o conteúdo pode ser visto no navegador da página. última barra de ferramentas e acima da barra de status Não tem nada a ver com o conteúdo da página.
clienteEsquerda
Obtém a distância entre a propriedade offsetLeft e o lado esquerdo real da área do cliente.
clienteTop
Obtém a distância entre a propriedade offsetTop e o topo real da área do cliente.
largura do cliente
Obtém a largura de um objeto, sem contar margens, bordas, barras de rolagem ou preenchimento que possam ser aplicados ao objeto.
Atributo ROLAGEM
rolar
Define ou obtém se a rolagem está desativada.
scrollHeight
Obtenha a altura de rolagem do objeto.
rolar para a esquerda
Define ou obtém a distância entre a borda esquerda do objeto e a borda mais à 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.
largura de rolagem
Obtém a largura de rolagem do objeto. atributo de evento
x
Define ou obtém a coordenada x-pixel da posição do ponteiro do mouse em relação ao documento pai.
telaX
Define ou obtém a coordenada x da posição do ponteiro do mouse em relação à tela do usuário
deslocamentoX
Define ou obtém a coordenada x da posição do ponteiro do mouse em relação ao objeto que acionou o evento.
clienteX
Define ou obtém a coordenada x da posição do ponteiro do mouse em relação à área cliente da janela, onde a área cliente não inclui os controles e barras de rolagem da própria janela.
Aqui falamos sobre a interpretação de clientHeight, offsetHeight e scrollHeight de document.body pelos quatro navegadores. Aqui estamos falando sobre document.body. Se for um controle HTML, é diferente.
Esses quatro navegadores são IE (Internet Explorer), NS (Netscape), Opera e FF (FireFox).
altura do cliente
Todos não têm objeções ao clientHeight. Todos pensam que é a altura da área visível do conteúdo, o que significa a altura da área onde o conteúdo pode ser visto no navegador da página. última barra de ferramentas e acima da barra de status Não tem nada a ver com o conteúdo da página.
deslocamentoAltura
IE e Opera acreditam que offsetHeight = clientHeight + barra de rolagem + borda. NS e FF consideram offsetHeight a altura real do conteúdo da página da web, que pode ser menor que clientHeight.
scrollHeight
O IE e o Opera consideram scrollHeight a altura real do conteúdo da página da web, que pode ser menor que clientHeight. NS e FF consideram scrollHeight a altura do conteúdo da página da web, mas o valor mínimo é clientHeight. Simplificando
clientHeight é a altura da área onde o conteúdo é visualizado através do navegador.
NS e FF acreditam que offsetHeight e scrollHeight são alturas de conteúdo da web, mas quando a altura do conteúdo da web é menor ou igual a clientHeight, o valor de scrollHeight é clientHeight e offsetHeight pode ser menor que clientHeight.
O IE e o Opera consideram offsetHeight a área visível da barra de rolagem clientHeight mais a borda. scrollHeight é a altura real do conteúdo da página da web.
Mesmo motivo
As explicações de clientWidth, offsetWidth e scrollWidth são as mesmas acima, apenas substitua a altura pela largura.
mas
FF interpreta clientHeight de maneira diferente em diferentes DOCTYPEs, mas xhtml 1 trasitional não o interpreta como acima. Outros navegadores não apresentam esse problema.
js obtém a altura da página
Copie o código do código da seguinte forma:
<roteiro>
função getInfo()
{
vars = "";
s += "Largura da área visível da página da web:"+ document.body.clientWidth;
s += "A altura da área visível da página web:"+ document.body.clientHeight;
s += "A largura da área visível da página da web: "+ document.body.offsetWidth + " (incluindo a largura das bordas e barras de rolagem)";
s += "A altura da área visível da página web: "+ document.body.offsetHeight + " (incluindo a largura das linhas laterais)";
s += "Largura completa do texto da página da web:"+ document.body.scrollWidth;
s += "Altura do texto completo do corpo da página da web:"+ document.body.scrollHeight;
s += "A altura em que a página da web é rolada (ff):"+ document.body.scrollTop;
s += "A altura em que a página da web é rolada (ou seja):"+ document.documentElement.scrollTop;
s += "O lado esquerdo da página da web está rolado:"+ document.body.scrollLeft;
s += "No corpo principal da página web: "+ window.screenTop;
s += "parte esquerda do texto da página da Web:"+ window.screenLeft;
s += "A altura da resolução da tela:"+ window.screen.height;
s += "Largura da resolução da tela:"+ window.screen.width;
s += "Altura da área de trabalho disponível na tela:"+ window.screen.availHeight;
s += "Largura da área de trabalho disponível na tela:"+ window.screen.availWidth;
s += "A configuração da sua tela é "+ window.screen.colorDepth +" bit color";
s += "Suas configurações de tela" + window.screen.deviceXDPI +" Pixels/polegada";
//alerta(s);
}
getInfo();
</script>
No meu teste local:
Pode ser usado no IE, FireFox, Opera
document.body.clientWidth
documento.body.clientHeight
Está disponível, é simples, é conveniente.
E entre os projetos da empresa:
Opera ainda usa
document.body.clientWidth
documento.body.clientHeight
Mas o IE e o FireFox usam
document.documentElement.clientWidth
document.documentElement.clientHeight
Acontece que os padrões W3C estão causando problemas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se você adicionar esta linha de tags à página
No IE:
document.body.clientWidth ==> Largura do objeto BODY
document.body.clientHeight ==> altura do objeto BODY
document.documentElement.clientWidth ==> Largura da área visível
document.documentElement.clientHeight ==> Altura da área visível
No Firefox:
document.body.clientWidth ==> Largura do objeto BODY
document.body.clientHeight ==> altura do objeto BODY
document.documentElement.clientWidth ==> Largura da área visível
document.documentElement.clientHeight ==> Altura da área visível
Na ópera:
document.body.clientWidth ==> Largura da área visível
document.body.clientHeight ==> Altura da área visível
document.documentElement.clientWidth ==> Largura do objeto de página (ou seja, largura do objeto BODY mais largura da margem)
document.documentElement.clientHeight ==> Altura do objeto da página (ou seja, altura do objeto BODY mais altura da margem)
E se não houver um padrão W3C definido, então
Ou seja, é:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox é:
document.documentElement.clientWidth ==> Largura do objeto de página (ou seja, largura do objeto BODY mais largura de margem) document.documentElement.clientHeight ==> Altura do objeto de página (ou seja, altura do objeto BODY mais altura de margem)
Ópera é:
document.documentElement.clientWidth ==> Largura do objeto de página (ou seja, largura do objeto BODY mais largura de margem) document.documentElement.clientHeight ==> Altura do objeto de página (ou seja, altura do objeto BODY mais altura de margem)
É realmente problemático. Na verdade, do ponto de vista do desenvolvimento, seria muito mais conveniente ter menos objetos e métodos e não usar os padrões mais recentes.