A menudo encuentro que al escribir JavaScript, debe usar la altura y el ancho de la página web, el navegador o la pantalla para resolver el problema de posicionamiento de diseño. A menudo lo olvida antes y después de su uso, o busca en línea, y simplemente resumirlo usted mismo, para que sea conveniente usarlo nuevamente, ahorrando tiempo y esfuerzo.
El ancho de área visible de la página web: document.body.clientwidth
La altura del área visible de la página web: document.body.clientHeight
El ancho de área visible de la página web: document.body.offsetwidth (incluido el ancho de la línea de borde)
La altura del área visible de la página web: document.body.offsetheight (incluido el ancho de la línea de borde)
Ancho de texto completo de la página web: document.body.scrollwidth (con ancho de la barra de desplazamiento)
Altura de texto completo de la página web: document.body.scrollheight (con altura de la barra de desplazamiento)
La página web se implementa en un alto nivel: document.body.scrolltop
La izquierda de la página web que se está implementando: document.body.scrollleft
En la parte principal de la página web: Window.screentop
Izquierda del texto principal de la página web: Window.Screenleft
Resolución de pantalla alta: Window.screen.Height
Ancho de resolución de pantalla: Window.screen.Width
Pantalla disponible en la altura del espacio de trabajo: ventana.screen.availheight
Pantalla disponible en el espacio de trabajo: Window.screen.availwidth
HTML Posicionamiento preciso: Scrollleft, Scrollwidth, ClientWidth, OffsetWidth
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
Es decir, las diferencias de Firefox son las siguientes:
IE6.0, FF1.06+:
La copia del código es la siguiente:
Clientwidth = ancho + relleno
clientHeight = altura + relleno
offsetWidth = ancho + relleno + borde
Offsetheight = altura + relleno + borde
IE5.0/5.5:
La copia del código es la siguiente:
ClientWidth = Width - Border
clientHeight = altura - borde
offsetwidth = ancho
Offsetheight = altura
Resumen: Hay muchas cosas sobre la altura y el ancho. No he entendido algunos de los detalles yo mismo. Después de experimentar con ellos, algunos de ellos tienen los mismos valores, por lo que es muy confuso y solo puede depender de la situación.