Supongamos que obj es un control HTML
obj.offsetTop se refiere a la posición superior calculada de obj en relación con el diseño o la coordenada principal especificada por el atributo offsetParent, número entero, píxel unitario.
obj.offsetLeft se refiere a la posición izquierda calculada de obj en relación con el diseño o la coordenada principal especificada por el atributo offsetParent, número entero, unidad de píxel.
obj.offsetWidth se refiere al ancho absoluto del control obj en sí, excluyendo la parte que no se muestra debido al desbordamiento, es decir, el ancho que realmente ocupa, número entero, unidad de píxel.
obj.offsetHeight se refiere a la altura absoluta del control obj en sí, excluyendo la parte que no se muestra debido al desbordamiento, es decir, la altura que realmente ocupa, número entero, unidad de píxel.
Expliquemos el offsetParent mencionado anteriormente.
offsetParent Obtiene una referencia al objeto contenedor que define las propiedades offsetTop y offsetLeft del objeto. offsetTop y offsetParent son muy complicados, diferentes navegadores tienen diferentes interpretaciones y las interpretaciones son diferentes cuando flotan, por lo que generalmente solo necesitamos entender que la posición absoluta del control en el navegador se puede obtener a través de los dos.
Las propiedades anteriores también son válidas en Firefox.
Además: de lo que estamos hablando aquí se refiere al valor del atributo del control HTML, no a document.body. El valor de document.body tiene diferentes interpretaciones en diferentes navegadores (de hecho, la mayoría de los entornos son causados por diferentes interpretaciones de document. cuerpo, no debido a diferentes interpretaciones de compensación)
Sabemos que offsetTop puede obtener la posición del elemento HTML desde el elemento superior o exterior, y también se puede usar style.top. La diferencia entre los dos es:
1. offsetTop devuelve un número, mientras que style.top devuelve una cadena Además del número, también tiene la unidad: px.
2. offsetTop es de solo lectura, mientras que style.top se puede leer y escribir.
3. Si no se especifica el estilo superior para el elemento HTML, style.top devuelve una cadena vacía.
Lo mismo ocurre con offsetLeft y style.left, offsetWidth y style.width, offsetHeight y style.height.
altura del cliente
Todos no tienen objeciones a clientHeight. Todos piensan que es la altura del área visible del contenido, es decir, la altura del área donde se puede ver el contenido en el navegador de la página. es el área debajo de la última barra de herramientas y encima de la barra de estado. No tiene nada que ver con el contenido de la página.
desplazamientoAltura
IE y Opera creen que offsetHeight = clientHeight + barra de desplazamiento + borde.
NS y FF consideran que offsetHeight es la altura real del contenido de la página web, que puede ser menor que clientHeight.
desplazamientoAltura
IE y Opera consideran que scrollHeight es la altura real del contenido de la página web, que puede ser menor que clientHeight.
NS y FF consideran que scrollHeight es la altura del contenido de la página web, pero el valor mínimo es clientHeight.
En pocas palabras
clientHeight es la altura del área donde se ve el contenido a través del navegador.
NS y FF creen que offsetHeight y scrollHeight son alturas de contenido web, pero cuando la altura del contenido web es menor o igual que clientHeight, el valor de scrollHeight es clientHeight y offsetHeight puede ser menor que clientHeight.
IE y Opera consideran que offsetHeight es el área visible de la barra de desplazamiento clientHeight más el borde. scrollHeight es la altura real del contenido de la página web.
Misma razón
Las explicaciones de clientWidth, offsetWidth y scrollWidth son las mismas que las anteriores, simplemente reemplace la altura con el ancho.
ilustrar
Lo anterior se basa en DTD HTML 4.01 Transitional. Si es DTD XHTML 1.0 Transitional, el significado será diferente. En XHTML, estos tres valores son todos el mismo valor, lo que indica la altura real del contenido. La mayoría de las versiones nuevas de navegadores admiten la habilitación de diferentes intérpretes según el DOCTYPE especificado en la página.
scrollTop es el valor de altura "enrollado", ejemplo:
Copie el código de código de la siguiente manera:
<div id="p">
<div id="t">Si scrollTop está configurado para p, es posible que estos contenidos no se muestren por completo. </div>
</div>
<tipo de script="texto/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Dado que scrollTop está configurado para el elemento exterior p, el elemento interior se desplazará hacia arriba y la parte enrollada es scrollTop.
scrollLeft es similar.
Ya sabemos que offsetHeight es el ancho de su propio elemento y scrollHeight es el ancho absoluto del elemento interno, incluida la parte oculta del elemento interno. En lo anterior, la altura de desplazamiento de p es 300 y la altura de desplazamiento de p es 100.
scrollWidth es similar.
IE y Firefox lo admiten totalmente, mientras que Netscape 8 y Opera 7.6 no admiten scrollTop y scrollLeft (excepto document.body.scrollTop y document.body.scrollLeft).
1.alturadelcliente, ancho del cliente:
Estas dos propiedades muestran aproximadamente la altura y el ancho de los píxeles del contenido del elemento. En teoría, estas medidas no tienen en cuenta nada agregado a través de la hoja de estilo.
Márgenes, bordes, etc. en elementos.
2.clienteIzquierdo,clienteArriba:
Estos dos devuelven el grosor del borde alrededor del elemento. Si no especifica un borde o no coloca el elemento, su valor es 0.
3.desplazarse hacia la izquierda,desplazarse hacia arriba:
Si el elemento se puede desplazar, puede utilizar estas dos propiedades para saber hasta qué punto se ha desplazado el elemento en las direcciones horizontal y vertical. La unidad es píxeles.
Para elementos que no se pueden desplazar, estos valores siempre son 0.
4. altura de desplazamiento, ancho de desplazamiento:
No importa cuántos objetos sean visibles en la página, obtendrán el conjunto.
5.estilo.izquierda:
El desplazamiento del elemento posicionado desde el borde izquierdo del rectángulo que lo contiene.
6.style.pixelIzquierda:
Devuelve el valor de píxel entero del desplazamiento del borde izquierdo del elemento posicionado. Debido a que el valor que no es un píxel del atributo devuelve una cadena que contiene la unidad, por ejemplo, 30 px. Utilice este atributo para manejar valores en píxeles por separado.
7.estilo:posLetf:
Devuelve el valor numérico del desplazamiento del borde izquierdo del elemento posicionado, independientemente de las unidades especificadas por el elemento de la hoja de estilo correspondiente. Porque el valor sin posición del atributo devuelve una cadena que contiene la unidad, por ejemplo, 1,2 em.
Bastarán algunas analogías como top, pixelTop, posTop.
IZQUIERDA: es la posición movida de izquierda a derecha, es decir, la distancia entre el colgante y el borde izquierdo de la pantalla;
clientLeft devuelve la distancia entre el valor de la propiedad offsetLeft del objeto y el valor real en el lado izquierdo de la ventana actual.
offsetLeft devuelve el valor izquierdo del objeto en relación con el diseño o las coordenadas del objeto principal. Toma la esquina superior izquierda del objeto principal como el origen de las coordenadas, y la derecha y hacia abajo son las coordenadas x en la dirección positiva de. los ejes X e Y.
pixelLeft establece o devuelve la posición del objeto en relación con el lado izquierdo de la ventana
scrollWidth es el ancho del contenido real del objeto, excluyendo el ancho del borde, y cambiará con la cantidad de contenido del objeto (demasiado contenido puede cambiar el ancho real del objeto).
clientWidth es el ancho visible del objeto, excluyendo las barras de desplazamiento y otros bordes, y cambiará con el tamaño de visualización de la ventana.
offsetWidth es el ancho visible del objeto, incluidas las barras de desplazamiento y otros bordes, y cambiará con el tamaño de visualización de la ventana.
IE6.0, FF1.06+:
clientWidth = ancho + relleno
altura del cliente = altura + relleno
offsetWidth = ancho + relleno + borde
offsetHeight = altura + relleno + borde
IE5.0/5.5:
clientWidth = ancho - borde
clientHeight = altura-borde
offsetWidth = ancho
alturadesplazamiento = altura
(Es necesario mencionar: el atributo de margen en CSS no tiene nada que ver con clientWidth, offsetWidth, clientHeight y offsetHeight)
offsetwidth: es el ancho de desplazamiento del elemento en relación con el elemento principal. Igual a borde+relleno+ancho
clientwidth: es el ancho visible del elemento. Igual a relleno+ancho
ancho de desplazamiento: es el ancho del elemento incluida la parte de desplazamiento.
offsetLeft: la posición del elemento HTML en relación con su propio elemento offsetParent
scrollLeft: Devuelve y establece el valor de coordenadas de la tarea de desplazamiento horizontal actual
Copie el código de código de la siguiente manera:
<tipo de entrada="botón" valor="Hacer clic" al hacer clic="mover()">
<div id="d" style="fondo-color:#ff9966; posición:absoluta; izquierda:170px; arriba:100px;ancho:300;alto:300;desbordamiento:desplazamiento"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<lenguaje de escritura="javascript">
función mover()
{
var d=document.getElementById("d")
a=evaluación(20)
d.scrollLeft+=a
}
</script>
Guárdelo como página web, ejecútelo, haga clic en el botón y la barra de desplazamiento se moverá
Haga clic en el div, primero muestre la posición de b en relación con a, y luego muestre la posición de a en relación con la ventana.