Reproducido: https://blog.csdn.net/zh_rey/article/details/78967174
1, offsetLeft (distancia a la posición de un control)
Supongamos que obj es un control HTML.
obj.offsetTop obj se refiere a la ubicación o distancia por encima de la superior de control, número entero píxeles.
medios obj.offsetLeft obj distancia hacia la izquierda o control de la posición superior, los píxeles enteros.
medios obj.offsetWidth obj sí control de ancho, los píxeles enteros.
obj.offsetHeight OBJ control mismo se refiere a la altura de píxeles enteros.
Hacemos una descripción de la mencionada "por encima o superior" y el control "izquierda o superior".
Por ejemplo:
<Div id = "herramienta">
<Input type = "botón" value = "提交">
<Input type = "botón" value = "重置">
</ Div>
"Enviar" significa offsetTop botón botón "enviar" de la "herramienta" de las fronteras de la capa superior de la distancia, porque desde su cima más recientemente en la capa fronteriza "herramienta".
"Reset" medios offsetTop botón botón "Reset" de los bordes de la capa superior distancia "herramienta" de su borde superior como es la frontera más cercana "herramienta" capa.
Botón "Enviar" offsetLeft medios botón "Enviar" de la capa de "herramienta" de la orilla izquierda, porque la izquierda desde el último de los cuales fue dejado frontera capa de "herramienta".
"Reset" offsetLeft se refiere al botón de "reinicio" desde el botón "Enviar" a la derecha de la caja, porque la izquierda desde el último de los cuales fue el botón "enviar" a la derecha de la caja.
Las propiedades anteriores son también eficaces en FireFox.
También: estamos hablando aquí se refiere a los controles HTML valor de la propiedad, no document.body, valor document.body tienen diferentes interpretaciones en diferentes navegadores (de hecho la mayor parte del entorno se debe de explicar las diferentes causas de document.body no a causa de la desviación causada por la diferente interpretación).
Título: la diferencia entre el offsetTop y style.top
Sabemos offsetTop puede obtener el elemento HTML desde una posición por encima o por elementos exteriores, style.top también es posible, la diferencia entre los dos es:
A, se devuelve el número offsetTop, y devuelve una cadena de style.top, excepto figuras con otras unidades: píxeles.
, Lectura-escritura y style.top dos, el offsetTop de sólo lectura.
En tercer lugar, si no hay ningún elemento para especificar el estilo HTML sobre la parte superior, a continuación, vuelve style.top una cadena vacía.
offsetLeft y style.left, offsetWidth y style.width, offsetHeight y style.height es la misma razón.
2, (altura del contenido visual (que comprende: el relleno no contiene:. Frontera, márgenes, una barra de desplazamiento), la altura real = ajuste de altura - la barra de desplazamiento) clientHeight
No tenemos ninguna objeción a clientHeight, son considerados como zona altamente visual, esa página de un navegador puede ver el contenido de esta altura , por lo general una duración de una barra de herramientas a la zona superior de la barra de estado, independientemente del contenido de la página.
3, offsetHeight (toda la altura del elemento (que comprende: el relleno, las fronteras)).
IE, Opera considera offsetHeight = clientHeight + + barra de desplazamiento frontera.
NS, FF pensar contenido web offsetHeight es la altura real, puede ser menor que clientHeight.
4, scrollHeight (altura del contenido elemento especificado)
contenido web Internet Explorer, Opera se considera scrollHeight altura real, puede ser menor que clientHeight.
NS, FF scrollHeight se considera la altura del contenido de la web, pero el mínimo es clientHeight.
5, scrollLeft
scrollTop el "roll" hasta el valor de altura, ejemplos:
<Div style = "width: 100px; altura: 100px; overflow: hidden;" id = "p">
<Style Div = "width: 50px; altura: 300px;" id = "t"> scrollTop Si se establece en p, el contenido no se muestre completamente. </ Div>
</ Div>
<Script type = "text / javascript">
var p = document.getElementById ( "p");
p.scrollTop = 10;
</ Script>
Puesto que se proporciona el elemento exterior scrollTop a p, de manera que el elemento interior se desplazará hacia arriba.
También scrollLeft razón similar.
Ya sabemos offsetHeight es el ancho del elemento en sí.
El scrollHeight es la anchura absoluta del elemento interno, la sección oculta contiene elementos internos.
Lo anterior scrollHeight p 300, y p es el offsetHeight 100.
También scrollWidth razón similar.
Soporte completo para Firefox e IE, pero Netscape y Opera no son compatibles con scrollTop, scrollLeft (excepto document.body).
6, clientLeft
La distancia entre el objeto offsetLeft volver al valor de la propiedad actual y el valor verdadero de la izquierda de la ventana, se apreciará la longitud de trama
He estado muy confundido en offsetLeft, offsetTop, scrollLeft, scrollTop estos métodos, pasaron el día aprendiendo un poco de buena. Se obtuvieron los siguientes resultados:
conclusión:
1.offsetTop:
objeto actual a su parte superior de capa superior distancia .
No se puede asignar. Ajuste de objetos a la distancia desde la parte superior de la página, por favor utilice la propiedad style.top.
2.offsetLeft:
objeto actual a la izquierda de su capa superior.
No se puede asignar. Ajuste de la distancia a la parte izquierda de objeto de la página, por favor utilice la propiedad style.left.
3.offsetWidth:
La anchura actual del objeto.
Porque la diferencia entre los atributos style.width: fijación de objetivos valores como la anchura del porcentaje de la anchura, independientemente de la página se hace más grande o más pequeño, style.width devolver este porcentaje, el valor de anchura offsetWidth objetos en diferentes páginas y retornos no un valor de porcentaje
4.offsetHeight:
Porque la diferencia entre los atributos style.height: establecimiento de valor objetivo como un porcentaje de la anchura de la altura, independientemente de la página se convierte en valores de altura offsetHeight objetos en diferentes páginas y vuelve grande o más pequeño, este retorno style.height porcentaje, y no un valor de porcentaje
5.offsetParent:
La capa superior actual objetos objetos.
Nota. Si el objeto está incluido en un DIV, entonces este no será tomado como DIV capa superior del objeto, (es decir, capa superior del objeto del objeto saltará DIV) es un alto presentes capa no hay problema cuando la mesa.
Con esta propiedad, se puede obtener la posición absoluta actual del objeto en la página de tamaños diferentes.
Obtener la posición absoluta del código de script
6.scrollLeft:
Más a la izquierda de distancia del objeto a un objeto en el rango de la ventana que se muestra actualmente en la izquierda.
Ese es el caso en el caso de la barra de desplazamiento horizontal, barra de desplazamiento se apartó.
7.scrollTop
Desde el borde superior del objeto de más arriba al objeto en el rango de la ventana que se muestra actualmente.
Ese es el caso en el caso de una barra de desplazamiento vertical, barra de desplazamiento se apartó.
Estamos aquí para hablar de los cuatro tipos de document.body navegador explicación de clientHeight, offsetHeight y scrollHeight, donde por ejemplo document.body es, si se trata de controles HTML, entonces no son diferentes.
Estos cuatro son los navegadores IE (Internet Explorer), NS (Netscape), Opera, FF (Firefox).
clientHeight
No tenemos ninguna objeción a clientHeight, que es considerado como zona altamente visual, es decir, la página del navegador se puede ver en la altura del área de contenido, por lo general duran una barra de herramientas a la zona superior de la barra de estado, independientemente del contenido de la página (incluso si el contenido es sólo una línea).
offsetHeight
IE, Opera considera offsetHeight = clientHeight + + barra de desplazamiento frontera.
NS, FF pensar contenido web offsetHeight es la altura real, puede ser menor que clientHeight.
scrollHeight
contenido web Internet Explorer, Opera se considera scrollHeight altura real, puede ser menor que clientHeight.
NS, FF scrollHeight se considera la altura del contenido de la web, pero el mínimo es clientHeight.
brevemente
clientHeight es mirar a la altura del área de contenido del navegador.
NS, FF pensar offsetHeight y scrollHeight son altamente contenido web, contenido web sólo cuando la altura de menos de o igual clientHeight, valor scrollHeight es clientHeight y offsetHeight puede ser menor que clientHeight.
IE, Opera considera offsetHeight es área visible la barra de desplazamiento clientHeight más fronteras. contenido web scrollHeight es la altura real.
del mismo modo
Explicación clientWidth, offsetWidth y scrollWidth mismo que el anterior, excepto que la altura puede ser sustituido por una anchura.