En el proceso de creación de una página web, a veces es necesario saber la ubicación exacta de un elemento en la página web.
El siguiente tutorial resume los conocimientos relevantes de Javascript en el posicionamiento de páginas web.
1. El tamaño de la página web y el tamaño de la ventana del navegador.
En primer lugar, es necesario aclarar dos conceptos básicos.
Toda el área de una página web es su tamaño. Normalmente, el tamaño de una página web está determinado por el contenido y las hojas de estilo CSS.
El tamaño de la ventana del navegador se refiere al área de la página web que se ve en la ventana del navegador, también llamada ventana gráfica.
Obviamente, si el contenido de la página web se puede mostrar completamente en la ventana del navegador (es decir, no aparecen barras de desplazamiento), entonces el tamaño de la página web y el tamaño de la ventana del navegador son iguales. Si no se puede mostrar la página completa, desplácese por la ventana del navegador para mostrar varias partes de la página web.
2. Obtener el tamaño de la página web.
Cada elemento de la página web tiene atributos clientHeight y clientWidth. Estos dos atributos se refieren al área visual ocupada por la parte del contenido del elemento más el relleno, excluyendo el espacio ocupado por el borde y la barra de desplazamiento.
(Figura 1 propiedades clientHeight y clientWidth)
Por lo tanto, los atributos clientHeight y clientWidth del elemento del documento representan el tamaño de la página web.
Copie el código de código de la siguiente manera:
función getViewport(){
si (document.compatMode == "BackCompat"){
devolver {
ancho: documento.body.clientWidth,
altura: documento.cuerpo.clientHeight
}
} demás {
devolver {
ancho: document.documentElement.clientWidth,
altura: documento.documentElement.clientHeight
}
}
}
La función getViewport anterior puede devolver el alto y el ancho de la ventana del navegador. Al usarlo, hay tres cosas a las que debes prestar atención:
1) Esta función debe ejecutarse después de cargar la página; de lo contrario, el objeto del documento no se habrá generado y el navegador informará un error.
2) En la mayoría de los casos, document.documentElement.clientWidth devuelve el valor correcto. Sin embargo, en el modo peculiar de IE6, document.body.clientWidth devuelve el valor correcto, por lo que el juicio del modo de documento se agrega a la función.
3) clientWidth y clientHeight son propiedades de solo lectura y no se les pueden asignar valores.
3. Otra forma de obtener el tamaño de una página web
Cada elemento de la página web también tiene propiedades scrollHeight y scrollWidth, que se refieren al área visual del elemento, incluida la barra de desplazamiento.
Luego, las propiedades scrollHeight y scrollWidth del objeto de documento son el tamaño de la página web, lo que significa toda la longitud y el ancho de la barra de desplazamiento.
Siguiendo la función getViewport(), se puede escribir la función getPagearea().
Copie el código de código de la siguiente manera:
función getPagearea(){
si (document.compatMode == "BackCompat"){
devolver {
ancho: document.body.scrollWidth,
altura: documento.cuerpo.scrollHeight
}
} demás {
devolver {
ancho: document.documentElement.scrollWidth,
altura: documento.documentElement.scrollHeight
}
}
}
Sin embargo, hay un problema con esta función. Si el contenido de la página web se puede mostrar completamente en la ventana del navegador sin barras de desplazamiento, entonces el ancho del cliente y el ancho de desplazamiento de la página web deben ser iguales. Pero, de hecho, diferentes navegadores tienen diferentes métodos de procesamiento y estos dos valores no son necesariamente iguales. Por lo tanto, necesitamos tomar el valor mayor entre ellos, por lo que necesitamos reescribir la función getPagearea().
Copie el código de código de la siguiente manera:
función getPagearea(){
si (document.compatMode == "BackCompat"){
devolver {
ancho: Math.max(document.body.scrollWidth,
documento.body.clientWidth),
altura: Math.max(document.body.scrollHeight,
documento.cuerpo.alturadelcliente)
}
} demás {
devolver {
ancho: Math.max(document.documentElement.scrollWidth,
documento.documentElement.clientWidth),
altura: Math.max(document.documentElement.scrollHeight,
documento.documentElement.clientHeight)
}
}
}
4. Obtener la posición absoluta de los elementos de la página web.
La posición absoluta de un elemento de una página web se refiere a las coordenadas de la esquina superior izquierda del elemento en relación con la esquina superior izquierda de toda la página web. Esta posición absoluta se puede obtener mediante cálculo.
Primero, cada elemento tiene los atributos offsetTop y offsetLeft, que representan la distancia entre la esquina superior izquierda del elemento y la esquina superior izquierda del contenedor principal (objeto offsetParent). Por lo tanto, solo necesitas acumular estos dos valores para obtener las coordenadas absolutas del elemento.
(Figura 2 atributos offsetTop y offsetLeft)
Las dos funciones siguientes se pueden utilizar para obtener la abscisa y la ordenada de la posición absoluta.
Copie el código de código de la siguiente manera:
función getElementLeft(elemento){
var actualLeft = elemento.offsetLeft;
var actual = elemento.offsetParent;
mientras (actual! == nulo) {
actualLeft += actual.offsetLeft;
actual = actual.offsetParent;
}
devolver realIzquierda;
}
función getElementTop(elemento){
var actualTop = elemento.offsetTop;
var actual = elemento.offsetParent;
mientras (actual! == nulo) {
actualTop += actual.offsetTop;
actual = actual.offsetParent;
}
devolver parte superior real;
}
Dado que en tablas e iframes, el objeto offsetParent no es necesariamente igual al contenedor principal, la función anterior no se aplica a los elementos en tablas e iframes.
5. Obtener la posición relativa de los elementos de la página web.
La posición relativa de un elemento de una página web se refiere a las coordenadas de la esquina superior izquierda del elemento en relación con la esquina superior izquierda de la ventana del navegador.
Con la posición absoluta, es fácil obtener la posición relativa. Simplemente reste la distancia de desplazamiento de la barra de desplazamiento de la página de las coordenadas absolutas. La distancia vertical de la barra de desplazamiento es la propiedad scrollTop del objeto del documento; la distancia horizontal de la barra de desplazamiento es la propiedad scrollLeft del objeto del documento.
(Figura 3 atributos scrollTop y scrollLeft)
Vuelva a escribir las dos funciones de la sección anterior en consecuencia:
Copie el código de código de la siguiente manera:
función getElementViewLeft(elemento){
var actualLeft = elemento.offsetLeft;
var actual = elemento.offsetParent;
mientras (actual! == nulo) {
actualLeft += actual.offsetLeft;
actual = actual.offsetParent;
}
si (document.compatMode == "BackCompat"){
var elementScrollLeft=document.body.scrollLeft;
} demás {
var elementScrollLeft=document.documentElement.scrollLeft;
}
devolver elemento-izquierdo actualScrollLeft;
}
función getElementViewTop(elemento){
var actualTop = elemento.offsetTop;
var actual = elemento.offsetParent;
mientras (actual! == nulo) {
actualTop += actual.offsetTop;
actual = actual.offsetParent;
}
si (document.compatMode == "BackCompat"){
var elementScrollTop=document.body.scrollTop;
} demás {
var elementScrollTop=document.documentElement.scrollTop;
}
devolver elemento superior actualScrollTop;
}
A los atributos scrollTop y scrollLeft se les pueden asignar valores y desplazarán automáticamente la página web a la posición correspondiente inmediatamente, por lo que se pueden usar para cambiar la posición relativa de los elementos de la página web. Además, el método element.scrollIntoView() también tiene un efecto similar, que puede hacer que el elemento de la página web aparezca en la esquina superior izquierda de la ventana del navegador.
6. Una forma rápida de obtener la posición de un elemento.
Además de las funciones anteriores, existe una forma rápida de obtener inmediatamente la posición de los elementos de la página web.
Eso es usar el método getBoundingClientRect(). Devuelve un objeto que contiene cuatro atributos: izquierda, derecha, superior e inferior, que corresponden respectivamente a la distancia entre la esquina superior izquierda y la esquina inferior derecha del elemento en relación con la esquina superior izquierda de la ventana del navegador (ventana gráfica). .
Por lo tanto, la posición relativa de los elementos de la página web es
Copie el código de código de la siguiente manera:
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
Además de la distancia de desplazamiento, puedes obtener la posición absoluta.
Copie el código de código de la siguiente manera:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
Actualmente, IE, Firefox 3.0+ y Opera 9.5+ admiten este método, pero Firefox 2.x, Safari, Chrome y Konqueror no.