How to write $("#content").height() in pure JavaScript?

Question

In my new project I have to do some content without jQuery. How to write jQuery code below in pure JavaScript?

$("#content").height()

Sure thing is, that $("#content") is in JS var content = document.getElementById('content');, but the .height() is for me big problem. Please help

Just as additional info: The answer is `clientHeight`. But you might stumble across `offsetHeight` someday, which you might confuse. Here is the explanation for each: http://stackoverflow.com/a/4106585/684932 — RaphaelDDL, Sep 05 '13 at 21:31

score 17 · Accepted Answer · answered Sep 05 '13 at 21:28

17

Equalent to $('#content').height() would be :

document.getElementById('content').clientHeight;

or equalent to $('#content').css('height')

document.getElementById('content').style.height;

answered Sep 05 '13 at 21:28

adeneo

312,895
29
395
388

Ok, thank you, it was the last issue of my code rewriting into the pure JS – user2737935 Sep 05 '13 at 21:46
This is incorrect, as clientHeight will include padding into the calculation. So a div with a content height of 10px, with 5px padding top and bottom will give a height of 20px, but jquery's height() will return 10px – Steven Brookes Nov 27 '19 at 13:00
@StevenBrookes - Back in 2013, I believe jQuery was actually using `clientHeight` internally, so the answer is correct. These days, jQuery uses several tricks to get the height without padding, including the styles and comparing etc. If one does encounter problems with this, and need the height without padding in plain javascript, one would have to actually get the padding, and then subtract the top and bottom padding from `clientHeight`, as there isn't really a function that returns it directly. – adeneo Nov 30 '19 at 02:39
Also note that `elem.style.height` isn't exactly the same as jQuery's `css()` function, as jQuery has like a hundred lines of code, using cssHooks and cssProps to get the currentStyles and return the dimensions of an element even if a style isn't specifically set etc, but for most cases, `elem.style` will return the same values. – adeneo Nov 30 '19 at 02:44

score 0 · Answer 2 · answered Sep 05 '13 at 21:29

0

var content = document.getElementById("content");
content.clientHeight;

answered Sep 05 '13 at 21:29

Gabe

49,577
28
142
181

score 0 · Answer 3 · answered Dec 08 '19 at 08:31

As stated in the comments, adeneo's solution is not correct as it will factor in unwanted padding into the height.

To get the same dimension as jQuery's .height() provides, this is the code you'll want to use.

const s = window.getComputedStyle(el, null),
height = el.clientHeight - parseInt(s.getPropertyValue('padding-top')) - parseInt(s.getPropertyValue('padding-bottom'));

Here is a function that will help calculate all of jQuery's height getter functions. If you want to calculate the width you'll just want to change some obvious properties in the code

function getHeight(el, type) {
    if (type === 'inner')  // .innerWidth()
        return el.clientHeight;
    else if (type === 'outer')  // .outerWidth()
        return el.offsetHeight;
    const s = window.getComputedStyle(el, null);
    if (type === 'height' || !type)  // .height()
        return el.clientHeight - parseInt(s.getPropertyValue('padding-top')) - parseInt(s.getPropertyValue('padding-bottom'));
    else if (type === 'full')  // .outerWidth( includeMargins = true )
        return el.offsetHeight + parseInt(s.getPropertyValue('margin-top')) + parseInt(s.getPropertyValue('margin-bottom'));
    return null;
}

How to write $("#content").height() in pure JavaScript?

3 Answers3