Определение высоты HTML-таблицы, которая динамически заполняется

Question

Я хотел бы нарисовать диаграмму в HTML. Структура позиционирования выглядит следующим образом:

  <div id='hostDiv'>
    <div id='backgroundDiv'>
     ... drawing the background ...
    </div>
    <div id='foregroundDiv' style='position: absolute;'>
     ... drawing the foreground ...
    </div>
  </div>

Передний план содержит элемент Table, который динамически заполняется текстом, поэтому высота строк может изменяться в зависимости от количества текста, поступающего в ячейку. Как я могу предсказать окончательную высоту элемента таблицы в предыдущем? Мне нужна эта информация, чтобы установить правильную высоту фона. Есть ли способ предварительно визуализировать таблицу из Javascript и считать ее высоту? Или какой-то другой трюк?

PS. Размер hostDiv может варьироваться в зависимости от размера браузера.

Answer 1

Нет способа предсказать высоту, не отображая ее в целевом браузере.

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

var height = $('#myTable').height();

Answer 2

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

$(document).ready(function () { var height = $('#myTable').height(); });

Answer 3

Если вы просто не хотите отображать таблицу до изменения размера foregorund div:
Установите style.visibility = "hidden" на столе. В отличие от display: none, это не удаляет div из потока документов, поэтому div переднего плана все равно будет иметь правильный размер (таблица просто не будет видна).

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

Answer 4

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

Тем не менее, вы можете использовать большинство библиотек js, чтобы найти то, что вы ищете. В Prototype это:

$('navlist-main').offsetHeight

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

Answer 5

Я думаю, что вы можете использовать один из атрибутов DOM: clientHeight, offsetHeight и scrollHeight, как определено в w3 здесь

Это использование clientHeight:

document.getElementById("#Table").clientHeight;
document.getElementById("#Table").clientWidth;