Разница между document.documentElement.clientHeight и document.body.clientHeight

#javascript

#javascript

Вопрос:

В чем разница между document.documentElement.clientHeight и document.body.clientHeight ? Являются ли возвращаемые значения согласованными во всех веб-браузерах или каждый оценивает их по-разному?

В моем конкретном случае documentElement кажется, что высота элемента меньше, чем у body элемента, что не имеет смысла. Почему это происходит?

Комментарии:

1. К вашему сведению, вам следует разделить разные вопросы на ну .. разные вопросы.

2. closed as not a real question и все же я потратил, вероятно, минут 20 на поиск ответа Guffa на ненастоящий вопрос.

3. @Нейт согласен. Я думаю, что это отличный вопрос с отличным ответом, но в нем слишком много ненужных комментариев и недостаточно ясности.. Я отредактировал вопрос … надеюсь, он пройдет проверку, боги!

Ответ №1:

document.documentElement Свойство предоставляет вам html элемент, в то время как document.body свойство предоставляет вам body элемент.

window.innerHeight Свойство возвращает высоту окна, а не высоту содержимого.

Разные браузеры будут выдавать разные значения для размера этих элементов, и один и тот же браузер может выдавать разные значения в зависимости от того, отображается страница в режиме Quirks или режиме соответствия стандартам, и используете ли вы HTML или XHTML. html Элемент может представлять либо окно, либо всю страницу. body Элемент может быть либо того же размера, что и html элемент, либо размера содержимого на странице.

Элементы html и body являются «волшебными» элементами, которые не существуют таким же образом, как другие элементы. В XHTML они были изменены таким образом, чтобы они работали больше как реальные элементы, но все еще есть некоторые вещи, которые являются «волшебными». Например, у body элемента нет собственного фона, вместо этого у html и body один и тот же фон, и он всегда покрывает все окно, даже если у body элемента его нет.

Комментарии:

1. Для меня сохранение некоторого содержимого xhtml без DOCTYPE и с расширением .html вынудило страницу загружаться в режиме Quirks, известном как обратная совместимость.

Ответ №2:

Я разобрался с проблемой! Это было связано с моим объявлением DOCTYPE прямо перед тегом HTML. Без doctype documentElement и body фактически переключаются.

Комментарии:

1. Да, я сказал, что значения могут отличаться в зависимости от того, отображается страница в режиме Quirks или в режиме соответствия стандартам.

Ответ №3:

Давайте спросим старого доброго Firebug (ради лени я сделал это прямо здесь, в Stack Overflow), в чем разница между этими двумя объектами:

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

Таким образом, document.documentElement указывает на <html> элемент верхнего уровня, в то время как document.body указывает на <body> элемент.

Комментарии:

1. Отвечает ли это на вопрос? Из сообщения, я думаю, OP знает, что document.documentElement ссылается на <html> элемент и хочет знать, насколько <body> он больше <html> .

Ответ №4:

Все, что я знаю, это то, что document.documentElement ссылается на html во время document.body //ссылается на тело

Но иногда они также используются одновременно из-за различий в приложениях поиска, таких как chrome, firefox и safari.

Комментарии:

1. Добро пожаловать в Stackoverflow. Этот вопрос был задан более 11 лет назад, и на него есть принятый ответ. Пожалуйста, добавьте некоторые подробности о причине, по которой вы добавляете новый ответ.