¡Los expertos en clientWidth, offsetWidth, clientHeight y offsetHeight lo explican en detalle!
Las diferencias en la interpretación de clientHeight, offsetHeight, scrollHeight, clientWidth, offsetWidth y scrollWidth por los cuatro navegadores
El ancho del área visible de la página web: documento. body.clientWidth
La altura del área visible de la página web: document.body.clientHeight
El ancho del área visible de la página web: documento. body.offsetWidth (incluido el ancho de los bordes)
La altura del área visible de la página web: document.body.offsetHeight (incluido el ancho de las líneas laterales)
El ancho del texto completo del cuerpo de la página web: document.body.scrollWidth
El alto del texto completo del cuerpo de la página web: document.body.scrollHeight
La página web es Desplazado hacia arriba para ir: document.body.scrollTop
Desplazado hacia la izquierda: document.body.scrollLeft
En el cuerpo principal de la página web: window.screenTop
El lado izquierdo de la parte de texto de la página web: window.screenLeft
La altura de la resolución de la pantalla: window.screen.height
El ancho de la resolución de la pantalla: window.screen.width
Alto del área de trabajo disponible en pantalla: window.screen.availHeight
Ancho del área de trabajo disponible en pantalla: window.screen.availWidth
Aquí Hable sobre clientHeight de document.body en cuatro navegadores, explicación de offsetHeight y scrollHeight.
Los cuatro navegadores son IE (Internet Explorer), NS (Netscape), Opera y FF (FireFox).
clientHeight
Los cuatro navegadores no tienen objeciones a la interpretación de clientHeight. Todos piensan que es la altura del área visible del contenido, lo que significa que. el contenido se puede ver en el navegador de la página. La altura de esta área generalmente es desde el área debajo de la última barra de herramientas hasta arriba de la barra de estado y no tiene nada que ver con el contenido de la página.
offsetHeight
IE y Opera creen que offsetHeight = clientHeight borde de la barra de desplazamiento.
NS y FF creen que offsetHeight es la altura real del contenido de la página web, que puede ser menor que clientHeight.
scrollHeight
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 creen 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.
De manera similar
Las explicaciones de clientWidth, offsetWidth y scrollWidth son las mismas que las anteriores, simplemente reemplace la altura con el ancho.
Nota: Lo anterior también se transfiere, es solo una referencia para mí, ¡algunos valores dependen del formato de la página! ¡El Ajax que uso es completamente incapaz de usar el método anterior para establecer la altura!
Propiedades de la ventana JavaScript:
Ancho del área visible de la página web: document.body.clientWidth
Alto del área visible de la página web: document.body .clientHeight
El ancho del área visible de la página web: document.body.offsetWidth (incluido el ancho de las líneas laterales)
La altura del área visible de la página web: document.body.offsetHeight (incluido el ancho de las líneas laterales)
El texto de la página web Ancho del texto completo: document.body.scrollWidth
Completo altura del texto del cuerpo de la página web: document.body.scrollHeight
Altura de la página web que se desplaza: document.body.scrollTop
El lado izquierdo de la página web que se desplaza: documento. body.scrollLeft
La parte superior del cuerpo principal de la página web: window.screenTop
La parte izquierda del cuerpo principal de la página web: window.screenLeft
p>
La altura de la resolución de la pantalla: window.screen.height
El ancho de la resolución de la pantalla: window.screen.width
Altura del área de trabajo disponible de la pantalla: window.screen.availHeight
El ancho del área de trabajo disponible de la pantalla: window.screen.availWidth
Se puede utilizar en IE, FireFox y Opera
document.body.clientWidth
document.body.clientHeight
se puede obtener, es muy simple y conveniente.
Y en proyectos de empresa:
Opera todavía usa
document.body.clientWidth
document.body.clientHeight
Pero IE y 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"gt;
Si agrega esta línea de etiquetas a la página
En IE:
document.body.clientWidth ==gt; ancho del objeto BODY
document.body.clientHeight ==alto del objeto BODY
document.documentElement.clientWidth ==gt; Ancho del área visible
document.documentElement.clientHeight ==gt; Alto del área visible
Nota: En IE, el "área visible" Básicamente, Body no se reconoce, pero se requiere documentElement.
En FireFox:
document.body.clientWidth ==gt BODY object width
document. body.clientHeight ==gt; BODY altura del objeto
document.documentElement.clientWidth ==gt; Ancho del área visible
document.documentElement.clientHeight ==gt; p>
En Opera:
document.body.clientWidth ==gt; Ancho del área visible
document.body.clientHeight ==gt;
p>
document.documentElement.clientWidth ==gt; ancho del objeto de la página (es decir, ancho del objeto BODY más ancho del margen)
document.documentElement.clientHeight ==alto del objeto de la página ( es decir, ancho del objeto CUERPO) Altura más altura del margen)
Obtenga la altura y el ancho de la ventana:
var w= document.documentElement.offsetWidth;
var h =document.documentElement.offsetHeight