El ancho del á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 del área visible de la página web: document.body.offsetWidth (incluido el ancho de los bordes)
La altura del área visible de la página web: document.body.offsetHeight (incluido el ancho del borde)
Ancho del texto completo del cuerpo de la página web: document.body.scrollWidth
Altura del texto completo del cuerpo de la página web: document.body.scrollHeight
La altura de la página web que se está desplazando: document.body.scrollTop
El lado izquierdo de la página web que se está desplazando: document.body.scrollLeft
En el cuerpo principal de la página web: window.screenTop
La parte izquierda del cuerpo principal de la página web: window.screenLeft
Alta resolución de pantalla: ventana.pantalla.altura
El ancho de la resolución de la pantalla: window.screen.width
Altura del área de trabajo disponible de la pantalla: window.screen.availHeight
Ancho del área de trabajo disponible en la pantalla: window.screen.availWidth
Posicionamiento preciso de HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: obtiene la altura de desplazamiento del objeto.
scrollLeft: establece u obtiene la distancia entre el borde izquierdo del objeto y el extremo izquierdo del contenido actualmente visible en la ventana
scrollTop: establece u obtiene la distancia entre la parte superior del objeto y la parte superior del contenido visible en la ventana
scrollWidth: obtiene 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 offsetParent de la coordenada principal.
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 las coordenadas principales especificadas por la propiedad offsetTop
event.clientX coordenada horizontal relativa al documento
event.clientY coordenada vertical relativa al documento
event.offsetX coordenada horizontal relativa al contenedor
event.offsetY coordenada vertical relativa al contenedor
document.documentElement.scrollValor superior para desplazamiento vertical
event.clientX+document.documentElement.scrollTop La coordenada horizontal relativa al documento + la cantidad de desplazamiento vertical
Las diferencias entre IE y Firefox son las siguientes:
IE6.0, FF1.06+:
clientWidth = ancho + relleno
altura del cliente = altura + relleno
offsetWidth = ancho + relleno + borde
offsetHeight = altura + relleno + borde
IE5.0/5.5:
clientWidth = ancho - borde
clientHeight = altura - borde
offsetWidth = ancho
alturadesplazamiento = altura
(Es necesario mencionar: el atributo de margen en CSS no tiene nada que ver con clientWidth, offsetWidth, clientHeight y offsetHeight)
Ancho del á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 del área visible de la página web: document.body.offsetWidth (incluido el ancho de los bordes)
La altura del área visible de la página web: document.body.offsetHeight (incluida la altura del borde)
Ancho del texto completo del cuerpo de la página web: document.body.scrollWidth
Altura del texto completo del cuerpo de la página web: document.body.scrollHeight
La altura a la que se desplaza la página web: document.body.scrollTop
El lado izquierdo de la página web que se está desplazando: document.body.scrollLeft
En el cuerpo principal de la página web: window.screenTop
La parte izquierda del cuerpo principal de la página web: window.screenLeft
La altura de la resolución de la pantalla: ventana.pantalla.altura
El ancho de la resolución de la pantalla: window.screen.width
Altura del área de trabajo disponible de la pantalla: window.screen.availHeight
Ancho del área de trabajo disponible en la pantalla: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
Puntos técnicos
El código de esta sección utiliza principalmente algunas propiedades del objeto Documento con respecto a la ventana. Las funciones principales y el uso de estas propiedades son las siguientes.
Para obtener el tamaño de la ventana, se deben usar diferentes propiedades y métodos para diferentes navegadores: para detectar el tamaño real de la ventana, debe usar las propiedades de la ventana en Netscape, en IE, debe profundizar en la ventana; Documento para detectar el cuerpo; en el entorno DOM, si desea obtener el tamaño de la ventana, debe prestar atención al tamaño del elemento raíz, no al elemento.
La propiedad insideWidth del objeto Window contiene el ancho interior de la ventana actual. La propiedad InnerHeight del objeto Window contiene la altura interior de la ventana actual.
El atributo del cuerpo del objeto Documento corresponde a la etiqueta del documento HTML. La propiedad documentElement del objeto 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 se encuentra el documento HTML.
implementar código
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<title>Cambie el tamaño de la ventana del navegador</title>
<meta http-equiv="tipo de contenido" contenido="text/html; charset=gb2312">
</cabeza>
<cuerpo>
<h2 align="center">Cambie el tamaño de la ventana del navegador</h2><hr>
<formulario acción="#" método="obtener" nombre="form1" id="form1">
<!--Mostrar el tamaño real de la ventana del navegador-->
Altura real de la ventana del navegador: <input type="text" name="availHeight" size="4"><br>
Ancho real de la ventana del navegador: <input type="text" name="availWidth" size="4"><br>
</formulario>
<tipo de script="texto/javascript">
<!--
var ganarAncho = 0;
var winHeight = 0;
función findDimensions() //Función: Obtener dimensiones
{
//Obtener el ancho de la ventana
si (ventana.anchointerior)
winWidth = ventana.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = documento.body.clientWidth;
//Obtener la altura de la ventana
si (ventana.alturainterior)
winHeight = ventana.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = documento.body.clientHeight;
//Detecta el cuerpo profundizando en el documento para obtener el tamaño de la ventana
si (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//Enviar los resultados a dos cuadros de texto
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
buscarDimensiones();
//Llama a la función y obtiene el valor
window.onresize=buscarDimensiones;
//-->
</script>
</cuerpo>
</html>
Interpretación del programa fuente
(1) El programa primero crea un formulario que contiene dos cuadros de texto para mostrar el ancho y alto actuales de la ventana, y sus valores cambiarán a medida que cambie el tamaño de la ventana.
(2) En el código JavaScript posterior, primero se definen dos variables winWidth y winHeight para guardar los valores de alto y ancho de la ventana.
(3) Luego, en la función findDimensions (), use window.innerHeight y window.innerWidth para obtener el alto y el ancho de la ventana y guárdelos en las dos variables antes mencionadas.
(4) Luego detecte el cuerpo profundizando en el Documento, obtenga el tamaño de la ventana y guárdelo en las dos variables mencionadas anteriormente.
(5) Al final de la función, al acceder a los elementos del formulario por nombre, los resultados se envían a dos cuadros de texto.
(6) Al final del código JavaScript, complete toda la operación llamando a la función findDimensions ().