Javascript clientHeight и альтернативы

Question

В настоящее время я пытаюсь изменить функцию Javascript, которая «скользит» по

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

s. Я нашел некоторый текст в свойстве clientHeight в javascript, но может показаться, что он не поддерживает

с отображением равным none (это метод, используемый для вставки div) Это имеет смысл, так как высота этого div в окне клиента - ничто.

По сути, мне было интересно, какие еще методы вы все знаете, или есть ли способ обойти clientHeight = 0 при отображении: нет.

Спасибо!

О, и вот функция, которую я использую:

function getDivHeight(objName) {
    return boxHeight = document.getElementById(objName).clientHeight;
}

Answer 1

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

Answer 2

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

var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item);  // item already hidden, so it won't show yet.
                                      // you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;

РЕДАКТИРОВАТЬ: Просматривая код jQuery, они делают именно то, что предлагает Цветомир Цонев. jQuery временно устанавливает стиль «display: block; position: absolute; visibility: none», а затем измеряет высоту, меняя свойства обратно после измерения.

Итак, похоже, что вы застряли с необходимостью сделать что-то хакерское, будь то клонирование узла или риск того, чтобы оно мерцало в некоторых браузерах ... Мне нравится предложение Цветомира лучше, чем мой первоначальный взлом, как минимум не требует клонирования узла в DOM, который вам не нужен. В любом случае, элемент не должен быть установлен на «display: none» для измерения его высоты. Разве DOM не замечательный? : -)

РЕДАКТИРОВАТЬ 2: Также стоит отметить, что после того, как jQuery соберет высоту, он добавляет допуски для отступов, полей и размеров полей, поэтому вам может понадобиться также.

Answer 3

Я знаю, что вы, ребята, решили это давно, но я подумал, что должен поделиться этим, поскольку довольно сложно получить высоту скрытого тега div. вот что я сделал после прочтения твоего поста, Я поместил div, который я хочу, чтобы скользить внутри 1px высоты div с переполнением, установленным на скрытый. вам даже не нужно устанавливать отображение внутреннего div на none, так как он уже есть, и если вы используете offsetHeight, он должен возвращать правильную высоту для всех браузеров, и вы можете использовать эту высоту для перемещения вашего div вверх вниз.

PEACE !!!

Answer 4

Да, элемент, который не отображается на странице, не имеет размеров.

Это имеет смысл. Рассмотрим элемент, который был создан и заполнен кучей текста, но еще не добавлен в дерево документа. Насколько это высоко? Зависит от размера шрифта. Насколько большой размер шрифта? Зависит от того, где в документе вставлен этот div; его родительский размер шрифта будет наследоваться через.

Аналогично для элемента с «display: none». Он не отображается, поэтому не имеет размеров. Разве мы не можем спросить «насколько бы это было высоко, если бы это было« display: block »»? Оказывается нет, потому что, если бы это было отображено , это само по себе могло бы изменить размеры его родительского блока, и тогда размер отображаемых элементов был бы несовместим с размерами неотображаемых элементов!

Типичное решение - сбросить «display: none», измерить высоту элемента, а затем немедленно сбросить «display: none». Браузер не будет перерисовываться в середине JavaScript, поэтому вы не увидите мерцание на странице.

Answer 5

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