A veces, en el proyecto, usa JS para obtener posiciones de elementos para localizar elementos. Primero, use la imagen para explicar la relación entre el ancho de desplazamiento, el ancho del cliente y la offsetwidth.
Una breve introducción a JS obteniendo varios anchos y alturas :
Scrollheight: obtiene la altura de desplazamiento del objeto.
Scrollleft: establezca o obtenga la distancia entre el límite izquierdo del objeto y el extremo más a la izquierda del contenido actualmente visible en la ventana
Scrolltop: Establezca o obtenga la distancia entre la parte superior del objeto y la parte superior del contenido visible en la ventana
Ancho de desplazamiento: obtenga el ancho de desplazamiento del objeto
OffsetHeight: obtiene la altura del objeto en relación con el diseño o la coordenada principal especificada por la propiedad de coordenadas de los principales compensación de compensación
OffsetLeft: obtiene la posición izquierda calculada del objeto en relación con el diseño o las coordenadas principales especificadas por la propiedad OffsetParent
Offsettop: Obtiene la posición superior calculada del objeto en relación con el diseño o la coordenada principal especificada por la propiedad Offsettop
Event.Clientx Coordenadas horizontales en relación con el documento
Event.Clienty Coordenadas verticales en relación con el documento
Event.OffSetx Coordenadas horizontales en relación con el contenedor
Event.Offsety Coordenadas verticales en relación con el contenedor
document.documentelement.scrolltop el valor de desplazarse verticalmente
event.clientx + document.documentelement.scrolltop en relación con la coordenada horizontal del documento + la cantidad de desplazamiento en la dirección vertical
Lo anterior se refiere principalmente a IE, y las diferencias en Firefox son las siguientes:
IE6.0, FF1.06+:
Clientwidth = ancho + relleno
clientHeight = altura + relleno
offsetWidth = ancho + relleno + borde
Offsetheight = altura + relleno + borde
IE5.0/5.5:
ClientWidth = Width - Border
clientHeight = altura - borde
offsetwidth = ancho
Offsetheight = altura
(Debe mencionarse que el atributo de margen en CSS no tiene nada que ver con ClientWidth, OffsetWidth, ClientHeight y OffSetHeight)
OffsetWidth (ancho+relleno+borde)
Suponga que OBJ es un control HTML.
OBJ.OffSettop se refiere a la posición, entero, píxel de la unidad desde OBJ al control superior o superior.
OBJ.OffsetLeft se refiere a la posición, entero, un píxel de la unidad de OBJ al control izquierdo o superior.
OBJ.OffSetWidth se refiere al ancho, entero y píxeles de la unidad del control OBJ en sí. Obtiene el ancho del contenido visible del objeto, excluyendo barras de desplazamiento y bordes;
OBJ.Offsetheight se refiere a la altura, entero, un píxel de la unidad del control OBJ en sí.
La diferencia entre OffsetWidth y estilo.
1. Offsettop devuelve un número, mientras que style.top devuelve una cadena, que también contiene la unidad: PX además del número.
2. Offsettop es de solo lectura, mientras que style.top es lectura-escritura.
3. Si no se especifica un estilo superior para los elementos HTML, entonces style.top devuelve una cadena vacía.