Según el estándar recién definido, el document.Documentedlement.ClientHeight puede obtener el valor correcto en IE y Firefox.
<script language = "javaScript">
Función getInfo ()
{{
var s = "";
S + = "Las páginas web son el ancho del área visible:" + document.body.clientwidth ;
S + = "Página web Visible Área High:" + Document.Body.ClientHeight ;
S + = "Ancho de área visible de la página web:" + document.body.offsetwidth + "(incluido el ancho del borde y la barra de desplazamiento)";
S + = "Área visible de la página web alto:" + document.body.offsetheight + "(incluido el ancho del borde)";
S + = "Web Página de texto de texto completo Ancho de texto:" + document.body.scrollwidth;
S + = "Texto de la página web High Text High:" + Dcument.body.scrollheight;
S + = "ff) que se aleja de la página web:" + document.body.scrolltop;
S + = "es decir):" + document.documentelement.scrolltop;
S + = "Las páginas web se enrollan a la izquierda:" + document.body.scrollleft;
S + = "Parte de texto de la página web:" + window.screentop;
S + = "Página web La parte del texto izquierda:" + Window.Screenleft;
S + = "resolución de pantalla alta:" + window.screen.height;
S + = "ancho de resolución de pantalla:" + window.screen.width;
S + = "Pantalla de altura del área de trabajo disponible:" + Window.screen.availheight;
S + = "Pantalla de pantalla de área disponible del área de trabajo:" + Window.screen.availwidth;
S += "La configuración de su pantalla es" +Window.screen.Colordepth +"Color de bits";
s += "Configuración de su pantalla" +Window.screen.devicexdpi +"Pixel/Inch";
alerta (s);
}
getInfo ();
</script>
En las pruebas locales:
Puedes usarlo bajo IE, Firefox, Opera
document.body.clientwidth
document.body.clitingHeight
Se puede obtener, muy simple y conveniente.
Y en el proyecto de la empresa:
Ópera todavía usa
document.body.clientwidth
document.body.clitingHeight
Pero es decir, y Firefox se usan
document.documentelement.clientwidth
document.documentelement.clientHeight
< !
Si agrega esta línea a la página
En IE:
document.body.clientwidth ==> ancho del objeto del cuerpo
document.body.clitingHeight ==> 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 del objeto del cuerpo
document.body.clitingHeight ==> 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.clitingHeight ==> Altura de área visible
document.documentelement.clientWidth ==> Page Object Width (es decir, el ancho del objeto del cuerpo más el ancho de margen)
document.documentelement.clientHeight == >> Altura del objeto de página (es decir, la altura del objeto del cuerpo más el margen alto)
Supongamos que OBJ es un control HTML.
Obj.OffSettop se refiere a la posición, el entero y el píxel de la unidad desde el control superior o superior de la capa.
Obj.OffsetLeft se refiere a la posición, entero, píxel de la unidad desde los controles izquierdo o superior.
OBJ.OffSetWidth se refiere al ancho, entero, un píxel de la unidad del control OBJ en sí.
OBJ.Offsetheight se refiere a la altura, entero, un píxel de la unidad del control OBJ en sí.
Explicamos las "capas superiores o superiores" y "capas izquierdas o superiores" mencionadas anteriormente.
Por ejemplo:
<div id = "herramienta">
<input type = "button" value = "enviar">
<input type = "button" value = "reset">
</div>
La offsettop del botón "enviar" se refiere a la distancia entre la capa de "herramienta" en la capa de "herramienta", porque el más cercano al marco superior de la capa de "herramienta" más cercana a ella.
El descenso del botón "Restablecer" se refiere a la distancia entre la capa de "herramienta" en la capa de "herramienta", porque el más cercano al marco superior de la capa de "herramienta" más cercana a ella.
El fallido del botón "enviar" se refiere a la distancia entre la capa de "herramienta" del botón "enviar", porque el lado izquierdo de la capa de "herramienta" más cercana al lado izquierdo de la capa de "herramienta" es la izquierda.
El botón de compensación del botón "Restablecer" se refiere a la distancia del botón "Enviar" desde el botón "Enviar", porque el marco correcto del botón "Enviar" más cercano es el lado derecho del botón "Enviar".
Offsettop puede obtener la posición del elemento HTML desde arriba o el elemento exterior, y el estilo también es posible.
1. Offsettop devuelve números, mientras que style.top devuelve una cadena.
2. Offsettop solo se lee, mientras que style.top se puede leer y escribir.
Tercero, si no especifica el estilo superior para el elemento HTML, el style.top devuelve una cadena vacía.
Offsetleft y Style.left, OffsetWidth y Style.Width, OffsetHeight y Style.head son los mismos.
ScrollHeight: Obtenga la altura de desplazamiento del objeto.
Scrollleft: configure o obtenga la distancia entre el extremo izquierdo del contenido actualmente visible en el límite izquierdo y la ventana del objeto
Scrolltop: configure o obtenga la distancia entre la parte superior del objeto y la parte superior de la ventana en la ventana
Ancho de desplazamiento: obtenga el ancho de desplazamiento del objeto
Offsetheight: la altura de las coordenadas matriz especificadas por el atributo offsetSetParent por el objeto de obtención
OffsetLeft: para el cálculo de la posición izquierda de la coordenada patriarcal de la coordenada patriarcal especificada por el atributo offetSetParent
Offsettop: la posición superior del cálculo de la coordenada patriarcal del patrón especificado por el atributo Offsettop
Event.Clientx Coordenadas horizontales de documentos relativos
Event.Clienty's vertical coordenadas de documentos relativos
Event.Offsetx Coordenadas horizontales de contenedores relativos
Event.Offsety's vertical coordenadas
document.docUmenetElement.scrolltop Valted Valley Rolling Valley
Event.clientx+document.documentelement.scrolltop La etiqueta del asiento horizontal del documento relativo+la cantidad de rodadura vertical rodante
Lo anterior se refiere principalmente a la diferencia entre el Firefox en IE: como sigue:
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 -Border
Offsetwidth = ancho
Offsetheight = altura
(Necesito mencionar: los atributos de margen en CSS no están relacionados con el ancho de clientes, OffsetWidth, ClientHeight, officeTheight)