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

Работа с высотой элемента

Материал из JQuery

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

height() — высота элемента без учета отступов и толщины рамки.
innerHeight() — высота элемента с учетом размера внутренних отступов (padding).
outerHeight(includeMargin) — высота элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin).

Замечание 1: использование функции .height() обычно удобнее, чем .css("height"), поскольку возвращаемое ей значение не содержит окончания «px». То есть в первом случае, вы получите 30, а во втором «30px».

Замечание 2: важно отметить, что используя метод .height(name) вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

В действии

Увеличим высоту всех элементов во второй колонке на 10 пикселей.

Ссылки

От автора jquery.page2page.ru

Мини-игра про поход за продуктами во время карантина.

Твой уникальный шанс напинать короновирусу буквально.

Источник

Определение и применение

jQuery метод .height() получает текущее вычисленное значение высоты для первого элемента в наборе совпавших элементов, или устанавливает высоту каждого соответствующего элемента.

jQuery метод .height() также сможете найти высоту окна, или документа:

jQuery метод .height() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Пример использования

В этом примере мы при нажатии на кнопку:

, высоту HTML документа и значение высоты области просмотра браузера.

Результат нашего примера:

В этом примере мы при нажатии на кнопку:

Результат нашего примера:

Рассмотрим следующий пример в котором с помощью метода .height() мы будем устанавливать значения высоты, а не возвращать.

В этом примере мы при нажатии на кнопку с использованием jQuery метода .height() устанавливаем значение высоты элементам

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

Результат нашего примера:

Рассмотрим следующий пример в котором в качестве параметра метода .height() мы передадим функцию.

В этом примере мы в качестве параметра метода .height() передаем функцию, которая возвращает и устанавливает новое значение высоты элемента

Результат нашего примера:

Рассмотрим следующий пример в котором с помощью метода .resize() и метода .height() будем отслеживать высоту области просмотра браузера и при её изменении устанавливать определённый цвет заднего фона.

Обратите внимание, что при загрузке страницы цвет будет белый, так как функция запуститься только при изменении размеров окна (jQuery метод .resize()).

Результат нашего примера:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как получить отображаемую высоту элемента?

как вы получаете отображаемую высоту элемента?

допустим, у вас есть

есть ли трюк для этого? Я использую jQuery, если это поможет.

16 ответов

Это должно быть просто

С помощью jQuery. Это возвращает высоту первого элемента в обернутом наборе в виде числа.

работает только если вы установили свойство в первую очередь. Не очень полезно!

clientHeight включает высоту и вертикальную прокладку.

offsetHeight включает высоту, вертикальную прокладку и вертикальные границы.

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

NON JQUERY так как была куча ссылок с использованием elem.style.height в верхней части эти ответы.

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

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

потом просто: style.height

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

я почти попал в ловушку только что использования offsetHeight. Вот что случилось:—4—>

вот только часть его :

но я не должен. Спасибо на jQuery!

мораль истории: если у jQuery есть метод для чего-то, вероятно, по уважительной причине, вероятно, связанной с совместимостью.

Если вы не читали через jQuery список методов недавно я предлагаю вам взглянуть.

Я сделал простой код, который даже не нуждается в JQuery и, вероятно, поможет некоторым людям. Он получает общую высоту » ID1 «после загрузки и использует ее на «ID2»

затем просто установите тело, чтобы загрузить его

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

который в основном пытается все и все, чтобы получить нулевой результат. ClientHeight без аффекта. С проблемными элементами я обычно получаю NaN в базе и ноль в высотах смещения и прокрутки. Затем я попробовал добавить решение DOM и clientRects, чтобы узнать, работает ли оно здесь.

29 июня 2011, Я действительно обновил код, чтобы попытаться добавить в DOM и clientHeight с лучшими результаты, чем я ожидал.

1) clientHeight также был 0.

2) Дом на самом деле дал мне высоту, которая была отличной.

3) ClientRects возвращает результат, почти идентичный методу DOM.

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

я добавил несколько снимков, чтобы показать, как высота рассчитывается по-разному.

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

(я отклоняюсь дальше) высота выходит (отображается) ниже, чем истинная отображаемая высота. Это можно решить, установив ширину элемента DOM Temp в соответствовать существующему родителю и может быть сделано довольно точно в теории. Я также не знаю, что произойдет в результате их удаления и добавления их обратно в существующее местоположение. Когда они пришли через технику innerHTML, я буду смотреть, используя этот другой подход.

* но * в этом не было необходимости. На самом деле он работал, как рекламируется, и вернул правильную высоту.

когда я смог получить меню видимым снова удивительно DOM вернул правильную высоту на макет жидкости в верхней части страницы (279px). Вышеуказанный код также использует getClientRects, которые возвращают 280px.

это показано на следующем снимке (взятом из Chrome после работы.)

Теперь у меня есть идея noooooo, почему этот прототип трюк работает, но кажется. Кроме того, getClientRects также работает.

Я подозреваю, что причиной всех этих проблем с этими конкретными элементами было использование innerHTML вместо appendChild, но это чистая спекуляция на данный момент.

Источник

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

Существует множество 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 )?

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

Источник