Как узнать высоту элемента js

Получить высоту элемента div в JavaScript

В HTML любые свойства CSS, которые вы предоставляете элементу либо с помощью таблиц стилей CSS, либо с помощью JavaScript, устанавливаются внутри объектной модели документа (DOM). С помощью этой модели DOM вы можете легко получить доступ к этим значениям позже в коде JavaScript. Есть разные способы получить значения свойств CSS внутри JavaScript. В этой статье будет рассказано, как получить свойство CSS height из нашего кода JavaScript.

Если вы запустите указанный выше HTML-документ, вы увидите такой прямоугольник в окне браузера.

Различные способы получить высоту элементов div в JavaScript

1. clientHeight

clientHeight возвращает высоту элемента, включая отступы, в виде целого числа.

2. offsetHeight

offsetHeight состоит из высоты элемента, которая также включает любые отступы, границы и горизонтальную полосу прокрутки (если есть).

3. scrollHeight

scrollHeight возвращает высоту содержимого, включая содержимое, которое не отображается на экране из-за переполнения. Он включает только заполнение элемента, но не границу, поле или горизонтальную полосу прокрутки.

4. getBoundingClientRect()

Метод getBoundingClientRect() возвращает объект, который содержит информацию, относящуюся к ширине и высоте элемента, а также его положению (x, y, вверху, слева и т. Д.) Относительно области просмотра. Высота, вычисленная этим методом, также содержит отступы и границы.

Источник

Размер и координаты элемента

Размеры элемента

В JavaScript иногда нужно узнать размеры элемента. Использовать для этого CSS свойства неудобно, потому что они не всегда содержат нужную информацию. Для этих целей используются свойства DOM объектов. Они содержат размеры элементов в пикселях. Но они позволяют только получить размеры. Если нужно их изменить, то меняются CSS свойства элемента.

Свойства offsetHeight и offsetWidth содержат общие высоту и ширину элемента вместе с рамкой.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Для примера создадим страницу с таким блоком:

Получим размеры этого блока:

Свойства clientHeight и clientWidth содержат размеры блока без рамки. Они включают содержимое и внутренние отступы.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Получим размеры контента для созданного ранее блока:

Координаты элемента

Эти координаты похожи на те, которые задаются при фиксированном позиционировании элемента. Однако, между ними есть важное отличие. Левые и верхние координаты определяются одинаково, поэтому совпадают. А вот нижние и правые координаты определяются по-разному. При позиционировании правая координата отсчитывается от правого края окна. А при определении координат правая координата отсчитывается от левого края окна. То же самое относится и к нижней координате. При позиционировании отсчёт производится от нижнего края окна, а при определении координат отсчёт производится от верхнего края окна.

Если страница уже прокручена и элемент находится выше или левее окна браузера, то координаты могу иметь отрицательные значения.

Не забывайте, что в большинстве браузеров страница имеет отступы от границ окна. Если эти отступы не отменены, то даже первый элемент на странице сначала имеет не нулевые координаты.

Определим координаты блока:

Коприрование материалов сайта возможно только с согласия администрации

Источник

Размеры и прокрутка элементов

Существует множество JavaScript-свойств, которые позволяют считывать информацию об элементе: ширину, высоту и другие геометрические характеристики. В этой главе мы будем называть их «метрики».

Они часто требуются, когда нам нужно передвигать или позиционировать элементы с помощью JavaScript.

Простой пример

В качестве простого примера демонстрации свойств мы будем использовать следующий элемент:

У элемента есть рамка (border), внутренний отступ (padding) и прокрутка. Полный набор характеристик. Обратите внимание, тут нет внешних отступов (margin), потому что они не являются частью элемента, для них нет особых JavaScript-свойств.

Результат выглядит так:

В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки. Некоторые браузеры (не все) отбирают место для неё, забирая его у области, отведённой для содержимого (помечена как «content width» выше).

Метрики

Вот общая картина с геометрическими свойствами:

Значениями свойств являются числа, подразумевается, что они в пикселях.

Давайте начнём исследовать, начиная снаружи элемента.

offsetParent, offsetLeft/Top

Эти свойства редко используются, но так как они являются «самыми внешними» метриками, мы начнём с них.

В свойстве offsetParent находится предок элемента, который используется внутри браузера для вычисления координат при рендеринге.

То есть, ближайший предок, который удовлетворяет следующим условиям:

В примере ниже внутренний

Существует несколько ситуаций, когда offsetParent равно null :

offsetWidth/Height

Теперь переходим к самому элементу.

Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки.

Для нашего элемента:

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Мы можем использовать это, чтобы делать проверку на видимость:

Заметим, что функция isHidden также вернёт true для элементов, которые в принципе показываются, но их размеры равны нулю (например, пустые

clientTop/Left

Пойдём дальше. Внутри элемента у нас рамки (border).

…Но на самом деле эти свойства – вовсе не ширины рамок, а отступы внутренней части элемента от внешней.

Она возникает, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.

Вот соответствующий пример на иврите:

clientWidth/Height

Эти свойства – размер области внутри рамок элемента.

Поэтому в тех случаях, когда мы точно знаем, что отступов нет, можно использовать clientWidth/clientHeight для получения размеров внутренней области содержимого.

scrollWidth/Height

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.

Нажмите на кнопку, чтобы распахнуть элемент:

scrollLeft/scrollTop

Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.

Другими словами, свойство scrollTop – это «сколько уже прокручено вверх».

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменять, и браузер выполнит прокрутку элемента.

Установка значения scrollTop на 0 или Infinity прокрутит элемент в самый верх/низ соответственно.

Не стоит брать width/height из CSS

Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.

Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

Обратите внимание: описанные различия касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.

Итого

У элементов есть следующие геометрические свойства (метрики):

Задачи

Найти размер прокрутки снизу

Свойство elem.scrollTop содержит размер прокрученной области при отсчёте сверху. А как подсчитать размер прокрутки снизу (назовём его scrollBottom )?

Другими словами: (вся высота) минус (часть, прокрученная сверху) минус (видимая часть) – результат в точности соответствует размеру прокрутки снизу.

Источник

Размеры и прокрутка элементов

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll.

Для того, чтобы показывать элементы на произвольных местах страницы, необходимо во-первых, знать CSS-позиционирование, а во-вторых – уметь работать с «геометрией элементов» из JavaScript.

В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и метриках – различных свойствах, которые содержат эту информацию.

Образец документа

Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:

Результат выглядит так:

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.

В этом случае полоса прокрутки «отодвигает» содержимое вместе с padding влево, отбирая у него место.

Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.

На рисунке выше поля padding изображены пустыми, но текст там вполне может быть, к примеру, при наличии вертикальной прокрутки.

Метрики

У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их «метриками».

Метрики, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.

Будем исследовать их снаружи элемента и вовнутрь.

offsetParent, offsetLeft/Top

Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.

Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.

В offsetParent находится ссылка на родительский элемент в смысле отображения на странице.

Уточним, что имеется в виду.

Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря «дерево геометрии» или «дерево рендеринга», которое содержит всю информацию о размерах.

В примере ниже внутренний

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

offsetWidth/Height

Теперь переходим к самому элементу.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Для нашего элемента:

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Это даёт нам замечательный способ для проверки, виден ли элемент:

clientTop/Left

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

…Но на самом деле они – вовсе не рамки, а отступ внутренней части элемента от внешней.

Она возникает тогда, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

clientWidth/Height

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Если padding нет, то clientWidth/Height в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Поэтому в тех случаях, когда мы точно знаем, что padding нет, их используют для определения внутренних размеров элемента.

scrollWidth/Height

Свойства clientWidth/clientHeight относятся только к видимой области элемента, а scrollWidth/scrollHeight добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту, таким кодом:

Нажмите на кнопку, чтобы распахнуть элемент:

element.style.height = element.scrollHeight + „px“

scrollLeft/scrollTop

Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.

Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменить, и браузер выполнит прокрутку элемента.

Не стоит брать width/height из CSS

Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.

Теперь несколько слов о том, как не надо делать.

Получение ширины элемента может быть таким:

Не лучше ли получать ширину так, вместо метрик? Вовсе нет!

Конечно, с точки зрения CSS размер auto – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.

Есть и ещё одна причина.

Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.

Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

Описанные разночтения касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.

Итого

У элементов есть следующие метрики:

Источник

Форум

Справочник

Измерения окна, документа и элементов

В решении многих задач может понадобиться определить положение, размер окна браузера, или каких-нибудь определенных элементов документа. В этой записи будут перечислены все способы определения этих значений.

Разрешение экрана

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.

Положение окна браузера можно изменить двумя методами:

Размеры окна браузера

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.

К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд.

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

Размеры окна браузера можно изменить двумя методами:

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

Размеры документа и элементов

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Для демонстрации, небольшой пример:

Точно так же можно определить размер всего документа, точнее размеры элемента body :

Положение элемента на странице

Обычно, функция по определению абсолютной позиции выглядит следующим образом:

Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).

Заключение

Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.

Ожидал увидеть еще способ кросс-браузерного получения координат мыши Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Взяв реализацию из jQuery и немного переделав её, получил:

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

автор пишы исчо это точно:) спс за размеры окна браузера

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Спасибо, всегда путаю, что x (икс) это «left» в переносе на слова.

Классная статья, спасибо!

Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства Как узнать высоту элемента js. Смотреть фото Как узнать высоту элемента js. Смотреть картинку Как узнать высоту элемента js. Картинка про Как узнать высоту элемента js. Фото Как узнать высоту элемента js:

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Для элемента div
«Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.»:
this.offsetWidth (FF3) = 609
this.offsetWidth (Chrome) = 609
this.offsetWidth (opera10) = 613
this.offsetWidth (IE7) = 613
Высота offsetHeight во всех браузерах посчиталась одинаково.

Для body везде получились различные значения высоты.

В качестве попытки кроссброузерного определения положения и размеры окна, можно попробовать его пробно подвигать и поизменять размеры. В этом случае сразу выяснится что учитывается для возвращаемых значений.

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

в IE7 не сработал, выдал 0

Я понял. Для IE надо math.max получать. Спасибо

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

Снова я, уж простите, доработанная функция:

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Спасибо, но для тех, кто не подключал jQuery эту часть кода

Спасибо. Долго искал эту информацию и нашел.

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
— верстаю в xhtml со следующим шаблоном пустого дока:

— если страница верстается php, то конечно же в нем шлется заголовок

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ‘ в строках.

А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.

Ну а когда валидация пройдена, то и гемороя меньше. Конечно если речь не идет о совсем старых браузерах, на которые я могу забить. Кто не может, тому мои искренние сожаления и моральная поддержка в тяжбах.

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

Говорю Спасибо за сайт.
Мне очень помог.

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!

Всем привет, Великолепная фраза

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит

помог scrollHeight снять с дива высоту динамически

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *