Calculate element's default height when it hasn't default value

Question

I want to calculate the height of an element (such div) in px, using javascript when it hasn't it's default value (= initial or auto).

Note that my element has another value for its height now (such 40px), but I want to understand what would be its height (in pixels) if I set that to initial or auto.

In other words:

myElement.style.height = '40px'; // for example
// ...
console.log(myElement.clientHeight); // This logs "40". This is not the value I want.
myElement.style.height = 'initial';
console.log(myElement.clientHeight); // This logs the value I want. But I don't want to execute above statement AT ALL!

Welcome to Stack Overflow! Please review our [SO Question Checklist](http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) to help you to ask a good question, and thus get a good answer. — Joe C, Nov 28 '16 at 22:59
Try: ´var cln = myElement.cloneNode(true); cln.style.visibility = 'hidden'; getElementsByTagName("BODY")[0].appendChild(cln); cln.style.height = 'initial'; console.log(cln.clientHeight);´ — Troyer, Nov 28 '16 at 23:07
Possible duplicate of [difference between css height : 100% vs height : auto](http://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto) — Pineda, Nov 28 '16 at 23:07
Basically you clone the element, hide it, append to the body, change the height to initial, and then get the height, I could do it better but I'm on the movile, sorry. — Troyer, Nov 28 '16 at 23:08
Why don't you just store the old value and reassign it at the end? — Oriol, Nov 28 '16 at 23:09
@Troyer, "Try: ´var cln = myElement.cloneNode(true);" ... I am looking for a clean way. — Mir-Ismaili, Nov 29 '16 at 05:23

score 2 · Answer 1 · answered Nov 28 '16 at 23:13

If I understand correctly, you want to be able to get the height that the element would have if it had no exact height style value defined ?

The answer is simple : you can't. The browser must have rendered the DOM to be able to access values linked to it such as clientHeight. You may, however, use hacky ways such as setting the height to auto, reading it, and setting it back to 40px, or using a hidden element (with visibility: hidden,not with display: none, because you need it to be rendered), but be aware that this is a bit dirty and hard to maintain.

Yes, you understood correctly. Thanks for your guidance. If it has no regular way, I am looking for a clean hacky way. — Mir-Ismaili, Dec 01 '16 at 13:23

score 0 · Answer 2 · answered Nov 29 '16 at 04:58

0

You can retrieve any element's dimensions by calling yourElement.getBoundingClientRect() even if you did not give an explicit value for one of its dimensions

This method returns an object with many properties including the height

Learn more HERE

answered Nov 29 '16 at 04:58

Trash Can

6,608
5
24
38

This returns same `clientHeight` value! I tried it. theElement.clientHeight == Math.round(theElement.getBoundingClientRect().height) – Mir-Ismaili Nov 29 '16 at 05:50
When you override a property's value, if you don't cache the original value, there is no way to retrieve it. It makes perfect sense if you think about it, when an object is mutated, it must discard the old value so it could place the new value in. What I suggest you do is store the initial height of your element before setting its new height, that way, you don't have to call `myElement.style.height = 'initial'; ` – Trash Can Nov 29 '16 at 05:53
Yes, that's why I said "I want to _calculate_ ...". Store? No. It is impossible! Its value may be change. It is a dynamic element. – Mir-Ismaili Nov 29 '16 at 06:10
No, store the original height when its height was `initial` which is fixed – Trash Can Nov 29 '16 at 06:12
The element's contents may be changed after you stored its height. So "stored value" no longer would be valid. – Mir-Ismaili Nov 29 '16 at 13:46

Mir-Ismaili · Accepted Answer · 2016-11-29T20:56:45.433

This is the best solution that I found till this moment, if your element is a container. You can insert an inner div immediately inside your element so that it (inner div) wrap whole contents of your (outer) element. As this:

<theElement style="height:40px;"> <!-- This is a CONTAINER! -->
    <div id="inner_div" style="margin:0; border:0; height:auto;">
        <!-- Your contents will be inserted here. -->
    <div>
</theElement>

Now you can:

console.log(theElement.clientHeight) // This logs 40.

yourDesiredValue = document.getElementById('inner_div').clientHeight;
console.log(yourDesiredValue);       // This logs that you want.

console.log(theElement.clientHeight) // This logs 40.

Notice that the inner div must has no margin and no border-width and its CSS height must be auto or initial.

Also it is recommended that insert CSS property declaration: overflow-y:hidden for theElement. So inner div can't pass from its parent's bounds, visually.

Calculate element's default height when it hasn't default value

3 Answers3