diferencia entre document.documentElement.clientHeight y document.body.clientHeight

Cuál es la diferencia entre document.documentElement.clientHeight y document.body.clientHeight? ¿Los valores de retorno son consistentes en todos los navegadores web o cada uno los evalúa de manera diferente?

En mi caso particular, el documentElement parece tener una altura menor que la body elemento, que no tiene sentido. ¿Por qué pasó esto?

preguntado el 08 de noviembre de 11 a las 14:11

Para tu información, deberías dividir las diferentes preguntas en bien ... diferentes preguntas. -

closed as not a real questiony, sin embargo, pasé probablemente 20 minutos buscando la respuesta de Guffa a una pregunta no real. -

@Nate estuvo de acuerdo. Creo que esta es una gran pregunta y tiene una respuesta sobresaliente, pero tenía demasiados comentarios innecesarios y falta de claridad ... Edité la pregunta ... ¡espero que pase la revisión de los dioses! -

3 Respuestas

La document.documentElement la propiedad te da la html elemento, mientras que el document.body la propiedad te da la body elemento.

La window.innerHeight La propiedad devuelve la altura de la ventana en lugar de la altura del contenido.

Los diferentes navegadores le darán valores diferentes para el tamaño de esos elementos, y el mismo navegador puede brindarle valores diferentes dependiendo de si la página se representa en el modo Quirks o en el modo de cumplimiento de estándares, y si está utilizando HTML o XHTML. los html El elemento puede representar la ventana o la página completa. los body El elemento puede ser del mismo tamaño que el html elemento o el tamaño del contenido de la página.

La html y body los elementos son elementos "mágicos" que no existen de la misma manera que otros elementos. En XHTML se cambiaron para que funcionen más como elementos reales, pero todavía hay algunas cosas que son "mágicas". Por ejemplo, el body elemento no tiene un fondo por sí mismo, en su lugar, el html y body comparten el mismo fondo, y siempre cubre toda la ventana, incluso si el body elemento no lo hace.

respondido 08 nov., 11:19

Para mí, guardar algunos contenidos xhtml sin DOCTYPE y con la extensión .html obligó a que la página se cargara en el modo Quirks, también conocido como BackCompat. - Hrishikesh Kadam

¡Descubrí el problema! Tenía que ver con mi declaración DOCTYPE justo antes de la etiqueta HTML. Sin el doctype, documentElement y body realmente cambian. Gracias por la ayuda de todos los demás también: D

respondido 08 nov., 11:19

Sí, dije que los valores pueden diferir dependiendo de si la página se representa en el modo Quirks o en el modo de cumplimiento de estándares. - Guffa

Preguntémosle al viejo firebug (por el simple hecho de ser perezoso, lo hice aquí en SO) por la diferencia entre esos dos objetos:

>>> document.documentElement
<html>
>>> document.body
<body class="question-page">

¿Entonces document.documentElement apunta al nivel superior <html> elemento mientras document.body apunta a la <body> elemento.

respondido 08 nov., 11:18

¿Responde esto a la pregunta? Desde la publicación, creo que OP sabe que document.documentElement se refiere al <html> elemento y quiere saber cómo <body> es mayor que <html>. - Tamzin Blake

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.