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 la coordenada principal especificada 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.
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; el cuerpo;
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.
Código de implementación <! "... ... ... ... "" ..... ... ...
La copia del código es la siguiente:
<! Doctype html público "-// w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> Ajuste la ventana del navegador </title>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
</ablo>
<Body>
<h2 align = "centro"> Ajuste el tamaño de la ventana del navegador </h2> <hr>
<form de acción = "#" método = "get" name = "form1" id = "form1">
<! Muestre el tamaño real de la ventana del navegador>
La altura real de la ventana del navegador: <input type = "text" name = "Disponse" size = "4"> <br>
El ancho real de la ventana del navegador: <input type = "text" name = "Disponsewidth" size = "4"> <br>
</form>
<script type = "text/javaScript">
<!
var WinWidth = 0;
var winHeight = 0;
función findDimensions () // Función: Obtener las dimensiones
{
// Obtener ancho de la ventana
if (window.innerwidth)
WinWidth = Window.innerWidth;
else if ((document.body) && (document.body.clientwidth))
winWidth = document.body.clientWidth;
// Obtener la altura de la ventana
if (window.innerheight)
winHeight = window.innerheight;
else if ((document.body) && (document.body.clientheight))
winHeight = document.body.clientHeight;
// Haga clic en el tamaño de la ventana detectando el cuerpo en el fondo del documento para obtener el tamaño del cuerpo
if (document.documentelement && document.documentelement.clientheight && document.documentelement.clientwidth)
{
winHeight = document.documentelement.clientHeight;
winWidth = document.documentelement.clientWidth;
}
// El resultado se emite a dos cuadros de texto
document.form1.availheight.value = winHeight;
document.form1.availwidth.value = winWidth;
}
findDimensions ();
// llamando a la función para obtener el valor
window.onresize = findImensions;
//
</script>
</body>
</html>
Interpretación del programa de origen
(1) El programa primero crea un formulario que contiene dos cuadros de texto para mostrar el ancho y la altura actuales de la ventana, y su valor cambiará con el cambio del tamaño de la ventana.
(2) En el código de JavaScript posterior, dos variables WinWidth y Winheight se definen primero para guardar los valores de altura y ancho de la ventana.
(3) Luego, en la función FindDimensions (), use Window.innerHeight y Window.innerWidth para obtener la altura y el ancho de la ventana, y guarde ambas en las dos variables anteriores.
(4) Luego, al profundizar en el documento, detectando el cuerpo, obteniendo el tamaño de la ventana y almacenándolo en las dos variables anteriores.
(5) Al final de la función, el resultado se emite a dos cuadros de texto accediendo al elemento de formulario por nombre.
(6) Al final del código JavaScript, complete la operación completa llamando a la función FindDimensions ().