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
Texto completo de la página web: document.body.scrollheight
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+:
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)
－－－－－－－－－－－－－－－－－－－
Lo más destacado técnico
El código en esta sección utiliza principalmente algunas propiedades del objeto de documento sobre la ventana. Las principales funciones y el uso de estas propiedades son las siguientes.
Para obtener el tamaño de la ventana, se deben utilizar diferentes propiedades y métodos para diferentes navegadores: para detectar el tamaño real de la ventana, debe usar los atributos de la ventana en Netscape; para detectar el cuerpo en IE; Para obtener el tamaño de la ventana, debe prestar atención al tamaño del elemento raíz, no al elemento.
La propiedad de ancho interno del objeto de la ventana contiene el ancho interno de la ventana actual. La propiedad InnerHeight del objeto de la ventana contiene la altura interna de la ventana actual.
El atributo corporal del objeto de documento corresponde a la etiqueta del documento HTML. La propiedad de documento del objeto de documento representa el nodo raíz del documento HTML.
document.body.clientHeight representa la altura actual de la ventana donde se encuentra el documento HTML. document.body.clientwidth representa el ancho actual de la ventana donde reside el documento HTML.
Una pequeña investigación sobre cómo obtener el tamaño de las ventanas visibles en varios navegadores.
En mi prueba local: se puede usar bajo IE, Firefox y Opera
document.body.clientwidth
document.body.clientHeight se puede obtener, es muy simple y conveniente.
En el proyecto de la compañía: la ópera todavía se usa
document.body.clientwidth
document.body.clientHeight
Pero es decir, Firefox usan
document.documentelement.clientwidth
document.documentelement.clientHeight
Resulta que el estándar W3C está causando problemas http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
Si agrega esta línea a la página
En IE: document.body.clientwidth ==> ancho de objeto de cuerpo
document.body.clientHeight ==> Altura del objeto del cuerpo
document.documentelement.clientwidth ==> ancho de área visible
document.documentelement.clientheight ==> altura de área visible
En Firefox: document.body.clientwidth ==> ancho de objeto de cuerpo
document.body.clientHeight ==> Altura del objeto del cuerpo
document.documentelement.clientwidth ==> ancho de área visible
document.documentelement.clientHeight ==> ¿Altura de área visible?
En Opera: document.body.clientwidth ==> ancho de área visible
document.body.clientHeight ==> Altura de área visible
document.documentelement.clientwidth ==> ancho del objeto de página (es decir, ancho del objeto del cuerpo más ancho de margen) document.documentelement.clientheight ==> altura del objeto de página (es decir, altura del objeto del cuerpo más altura del margen)
Si no hay estándar para W3C,
Entonces, es decir, document.documentelement.clientwidth ==> 0
document.documentelement.clientheight ==> 0
Firefox es: document.documentelement.clientwidth ==> ancho del objeto de página (es decir, ancho del objeto del cuerpo más el ancho del margen)
document.documentelement.clientHeight ==> Altura del objeto de página (es decir, altura del objeto del cuerpo más altura del margen)
Opera es: document.documentelement.clientwidth ==> ancho del objeto de página (es decir, ancho del objeto del cuerpo más el ancho del margen)
document.documentelement.clientHeight ==> Altura del objeto de página (es decir, altura del objeto del cuerpo más altura del margen)
Es realmente una molestia. De hecho, desde la perspectiva del diseño y el desarrollo front-end, es mejor tener menos objetos y métodos que no usar los últimos estándares. Pero si no puede mantenerse al día con la tendencia, nunca será un diseñador senior, por lo que aún debemos comprender y dominar este conocimiento.