发表新帖
发表新帖

How do you get the rendered height of an element?

前端 未结
关注
18 2314
情书的邮戳
情书的邮戳 2020-11-22 03:11

How do you get the rendered height of an element?

Let\'s say you have a

element with some content inside. This content inside is going to st
相关标签:
18条回答
  • 执笔经年
    2020-11-22 03:35

    I made a simple code that doesn't even need JQuery and probably gonna help some people. It gets the total height of 'ID1' after loaded and use it on 'ID2'

    function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

    Then just set the body to load it

    <body onload='anyName()'>
    0 讨论(0)
  • 梦谈多话
    2020-11-22 03:36

    I use this to get the height of an element (returns float):

    document.getElementById('someDiv').getBoundingClientRect().height

    It also works when you use the virtual DOM. I use it in Vue like this:

    this.$refs['some-ref'].getBoundingClientRect().height
    0 讨论(0)
  • 青春惊慌失措
    2020-11-22 03:36

    Definitely use 

    $('#someDiv').height()   // to read it

    or

    $('#someDiv').height(newHeight)  // to set it

    I'm posting this as an additional answer because theres a couple important things I just learnt.

    I almost fell into the trap just now of using offsetHeight. This is what happened :

    • I used the good old trick of using a debugger to 'watch' what properties my element has
    • I saw which one has a value around the value I was expecting
    • It was offsetHeight - so I used that.
    • Then i realized it didnt work with a hidden DIV
    • I tried hiding after calculating maxHeight but that looked clumsy - got in a mess.
    • I did a search - discovered jQuery.height() - and used it
    • found out height() works even on hidden elements
    • just for fun I checked the jQuery implementation of height/width

    Here's just a portion of it :

    Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)

    Yup it looks at BOTH scroll and offset. If that fails it looks even further, taking into account browser and css compatibility issues. In other words STUFF I DONT CARE ABOUT - or want to.

    But I dont have to. Thanks jQuery!

    Moral of the story : if jQuery has a method for something its probably for a good reason, likely related to compatibilty.

    If you haven't read through the jQuery list of methods recently I suggest you take a look.

    0 讨论(0)
  • 情书的邮戳
    2020-11-22 03:39

    If i understood your question correctly, then maybe something like this would help:

    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');
    } 
}
    0 讨论(0)
  • 一整个雨季
    2020-11-22 03:40

    Hm we can get the Element geometry...

    var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

    How about this plain JS ?

    0 讨论(0)
  • 长情又很酷
    2020-11-22 03:42

    Sometimes offsetHeight will return zero because the element you've created has not been rendered in the Dom yet. I wrote this function for such circumstances:

    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;
}
    0 讨论(0)
 看不清?
提交回复
热议问题