No processo de criação de uma página web, às vezes você precisa saber a localização exata de um elemento na página web.
O tutorial a seguir resume o conhecimento relevante de Javascript no posicionamento de páginas web.
1. O tamanho da página da web e o tamanho da janela do navegador
Primeiramente, dois conceitos básicos devem ser esclarecidos.
Toda a área de uma página web é o seu tamanho. Normalmente, o tamanho de uma página da web é determinado pelo conteúdo e pelas folhas de estilo CSS.
O tamanho da janela do navegador refere-se à área da página da web vista na janela do navegador, também chamada de janela de visualização.
Obviamente, se o conteúdo da página da web puder ser totalmente exibido na janela do navegador (ou seja, nenhuma barra de rolagem aparecer), o tamanho da página da web e o tamanho da janela do navegador serão iguais. Se a página inteira não puder ser exibida, role a janela do navegador para exibir diversas partes da página da web.
2. Obtenha o tamanho da página da web
Cada elemento da página da web possui atributos clientHeight e clientWidth. Esses dois atributos referem-se à área visual ocupada pela parte do conteúdo do elemento mais o preenchimento, excluindo o espaço ocupado pela borda e barra de rolagem.
(Figura 1 propriedades clientHeight e clientWidth)
Portanto, os atributos clientHeight e clientWidth do elemento document representam o tamanho da página da web.
Copie o código do código da seguinte forma:
função getViewport(){
if (document.compatMode == "BackCompat"){
retornar {
largura: document.body.clientWidth,
altura: document.body.clientHeight
}
} outro {
retornar {
largura: document.documentElement.clientWidth,
altura: document.documentElement.clientHeight
}
}
}
A função getViewport acima pode retornar a altura e a largura da janela do navegador. Ao usá-lo, há três coisas que você precisa prestar atenção:
1) Esta função deve ser executada após o carregamento da página, caso contrário o objeto do documento não foi gerado e o navegador reportará um erro.
2) Na maioria dos casos, document.documentElement.clientWidth retorna o valor correto. Porém, no modo quirks do IE6, document.body.clientWidth retorna o valor correto, então o julgamento do modo documento é adicionado à função.
3) clientWidth e clientHeight são propriedades somente leitura e não podem receber valores atribuídos.
3. Outra maneira de obter o tamanho de uma página da web
Cada elemento da página da web também possui propriedades scrollHeight e scrollWidth, que se referem à área visual do elemento, incluindo a barra de rolagem.
Então, as propriedades scrollHeight e scrollWidth do objeto de documento são o tamanho da página da web, o que significa todo o comprimento e largura da barra de rolagem.
Seguindo a função getViewport(), a função getPagearea() pode ser escrita.
Copie o código do código da seguinte forma:
função getPagearea(){
if (document.compatMode == "BackCompat"){
retornar {
largura: document.body.scrollWidth,
altura: document.body.scrollHeight
}
} outro {
retornar {
largura: document.documentElement.scrollWidth,
altura: document.documentElement.scrollHeight
}
}
}
No entanto, há um problema com esta função. Se o conteúdo da página da web puder ser totalmente exibido na janela do navegador sem barras de rolagem, então o clientWidth e o scrollWidth da página da web deverão ser iguais. Mas, na verdade, navegadores diferentes têm métodos de processamento diferentes e esses dois valores não são necessariamente iguais. Portanto, precisamos pegar o valor maior entre eles, então precisamos reescrever a função getPagearea().
Copie o código do código da seguinte forma:
função getPagearea(){
if (document.compatMode == "BackCompat"){
retornar {
largura: Math.max(document.body.scrollWidth,
document.body.clientWidth),
altura: Math.max(document.body.scrollHeight,
documento.body.clientHeight)
}
} outro {
retornar {
largura: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
altura: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
4. Obtenha a posição absoluta dos elementos da página web
A posição absoluta de um elemento de página web refere-se às coordenadas do canto superior esquerdo do elemento em relação ao canto superior esquerdo de toda a página web. Esta posição absoluta pode ser obtida através de cálculo.
Primeiro, cada elemento possui atributos offsetTop e offsetLeft, que representam a distância entre o canto superior esquerdo do elemento e o canto superior esquerdo do contêiner pai (objeto offsetParent). Portanto, basta acumular esses dois valores para obter as coordenadas absolutas do elemento.
(Figura 2 atributos offsetTop e offsetLeft)
As duas funções a seguir podem ser usadas para obter a abscissa e a ordenada da posição absoluta.
Copie o código do código da seguinte forma:
função getElementLeft(elemento){
var actualLeft = element.offsetLeft;
var atual = element.offsetParent;
while (atual !== nulo){
actualLeft += atual.offsetLeft;
atual = atual.offsetParent;
}
retornar atualEsquerda;
}
função getElementTop(elemento){
var actualTop = element.offsetTop;
var atual = element.offsetParent;
while (atual !== nulo){
actualTop += atual.offsetTop;
atual = atual.offsetParent;
}
return atualTop;
}
Como em tabelas e iframes o objeto offsetParent não é necessariamente igual ao contêiner pai, a função acima não se aplica a elementos em tabelas e iframes.
5. Obtenha a posição relativa dos elementos da página web
A posição relativa de um elemento de página da web refere-se às coordenadas do canto superior esquerdo do elemento em relação ao canto superior esquerdo da janela do navegador.
Com a posição absoluta é fácil obter a posição relativa. Basta subtrair a distância de rolagem da barra de rolagem da página das coordenadas absolutas. A distância vertical da barra de rolagem é a propriedade scrollTop do objeto de documento; a distância horizontal da barra de rolagem é a propriedade scrollLeft do objeto de documento.
(Figura 3 atributos scrollTop e scrollLeft)
Reescreva as duas funções da seção anterior de acordo:
Copie o código do código da seguinte forma:
função getElementViewLeft(elemento){
var actualLeft = element.offsetLeft;
var atual = element.offsetParent;
while (atual !== nulo){
actualLeft += atual.offsetLeft;
atual = atual.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} outro {
var elementScrollLeft=document.documentElement.scrollLeft;
}
retornar elemento realLeftScrollLeft;
}
função getElementViewTop(elemento){
var actualTop = element.offsetTop;
var atual = element.offsetParent;
while (atual !== nulo){
actualTop += atual.offsetTop;
atual = atual.offsetParent;
}
if (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} outro {
var elementScrollTop=document.documentElement.scrollTop;
}
retornar actualTop-elementScrollTop;
}
Os atributos scrollTop e scrollLeft podem receber valores e rolarão automaticamente a página da web para a posição correspondente imediatamente, para que possam ser usados para alterar a posição relativa dos elementos da página da web. Além disso, o método element.scrollIntoView() também tem um efeito semelhante, que pode fazer com que o elemento da página web apareça no canto superior esquerdo da janela do navegador.
6. Uma maneira rápida de obter a posição de um elemento
Além das funções acima, existe uma maneira rápida de obter imediatamente a posição dos elementos da página web.
Isso é para usar o método getBoundingClientRect(). Retorna um objeto que contém quatro atributos: esquerdo, direito, superior e inferior, que correspondem respectivamente à distância entre o canto superior esquerdo e o canto inferior direito do elemento em relação ao canto superior esquerdo da janela do navegador (viewport) .
Portanto, a posição relativa dos elementos da página web é
Copie o código do código da seguinte forma:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
Além da distância de rolagem, você pode obter a posição absoluta
Copie o código do código da seguinte forma:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
Atualmente, IE, Firefox 3.0+ e Opera 9.5+ suportam esse método, mas Firefox 2.x, Safari, Chrome e Konqueror não.