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

Question

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

Допустим, у вас есть элемент <div> с некоторым содержимым внутри. Это содержимое внутри будет растягивать высоту <div>. Как вы получаете «визуализированную» высоту, если вы явно не установили высоту. Очевидно, я попытался:

var h = document.getElementById('someDiv').style.height;

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

Answer 1

offsetHeight, обычно.

Если вам нужно что-то вычислить, но не показать, установите элемент на visibility:hidden и position:absolute, добавьте его в дерево DOM, получите offsetHeight и удалите его. (Это то, что библиотека прототипов делает за кулисами в прошлый раз, когда я проверял).

Answer 2

Иногда offsetHeight будет возвращать ноль, потому что созданный вами элемент еще не отображался в Dom. Я написал эту функцию для таких обстоятельств:

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}

Answer 3

Если вы уже используете jQuery, ваша лучшая ставка - .outerHeight() или .height(), как уже было сказано.

Без jQuery вы можете проверить размер используемого блока и добавить различные отступы + границы + clientHeight, или , которые вы можете использовать getComputedStyle :

var h = getComputedStyle (document.getElementById ('someDiv')). Height;

h теперь будет выглядеть как "53.825px".

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

Answer 4

С MooTools:

$ ( 'someDiv'). GETSIZE (). У

Answer 5

Если я правильно понял ваш вопрос, то, возможно, что-то подобное поможет:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

Answer 6

document.querySelector('.project_list_div').offsetWidth;

Answer 7

Вы специально установили высоту в CSS? Если у вас нет, вам нужно использовать offsetHeight; вместо height

var h = document.getElementById('someDiv').style.offsetHeight;