find out elemet`s real height with js, when css height is set to 0

Question

I am trying to create a script, that opens and closes the menu. the problem is that I need to figure out the element`s height while it-s height is set to 0 from css.

I come out with a really ugly solution, I wonder if there is a more elegant way to do this.

my solution is to set visibility to hidden, then set height to auto, then query the height, after that to set back the height, and visibility.

I need this for css animation, because css anim it is not working with height auto, and height 0px, I need to have the height in px.

this is my code:

document.getElementById('menu_button').onclick = function() {
        if (document.getElementById('mobile-menu').style.height == '0px') {
            document.getElementById('mobile-menu').style.visibility = 'hidden';
            document.getElementById('mobile-menu').style.height = 'auto';
            var MobileMenuHeight = document.getElementById('mobile-menu').clientHeight;
            document.getElementById('mobile-menu').style.height = '0px';
            document.getElementById('mobile-menu').style.visibility = 'visible';
            setTimeout(() => { document.getElementById('mobile-menu').style.height = MobileMenuHeight + 'px'; }, 50);
        } else {
            document.getElementById('mobile-menu').style.height = "0px";
        }
    }

You can use max-height and transformation see this answer https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — uke, Dec 12 '20 at 20:29

score 0 · Answer 1 · answered Dec 12 '20 at 20:24

0

You can use getComputedStyle.

if (getComputedStyle(document.getElementById('mobile-menu')).height == '0px')

answered Dec 12 '20 at 20:24

Unmitigated

76,500
11
62
80

this is not working getComputedStyle returns 0px, when menu height is set to 0. I need to get the menu-s auto height, while it`s height it is set to 0px from css. – Botond Vajna Dec 12 '20 at 20:40
@BotondVajna What do you mean? If the height is set to `0`, should it not be `0px`? – Unmitigated Dec 12 '20 at 20:40
I need to get the mobile menu height as it`s height where set to auto, but while it`s height is set to 0, look at the code, that code is working. I was asking if there a more elegant solution to do that. – Botond Vajna Dec 12 '20 at 20:45

score 0 · Answer 2 · answered Dec 13 '20 at 09:54

Finally I figured out a better and simple solution.

I just put the menu in a container with overflow: hidden and I scale the container, this way the menu itself can keep it's height.

function toggleMobileMenu() {
    document.getElementById('menu-button').onclick = function() {
        var MobileMenuHeight = document.getElementById('mobile-menu').clientHeight;
        var MenuContainerHeight = document.getElementById('mobile-menu-container').clientHeight;
        if (MenuContainerHeight == 0) {
            document.getElementById('mobile-menu-container').style.height = MobileMenuHeight + 'px';
        } else {
            document.getElementById('mobile-menu-container').style.height = "0px";
        }
    }
}

document.onload = toggleMobileMenu();

#menu-button {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 16px;
    top: 60px;
    z-index: 98;
    }
#menu-button div {
    width: 90%;
    height: 6px;
    margin: 6px auto;
    background-color: #555;
    border-radius: 3px;
}
.mobile-menu-container {
    background: #ddd;
    overflow: hidden;
    height: 0;
    transition: height 0.33s;
}
.mobile-menu {
    background: #8888ff;
}

<html>
<head>
<meta charset = "UTF-8">
</head>
<body>

<div id="menu-button"><div></div><div></div><div></div></div>

<div id = "mobile-menu-container" class = "mobile-menu-container">
    <div class = "mobile-menu" id="mobile-menu">        
        <div class="menu-container">
            <ul>
                <li><a href="#">Menu item 1</a></li>
                <li><a href="#">Menu item 1</a></li>
                <li><a href="#">Menu item 1</a></li>
                <li><a href="#">Menu item 1</a></li>
                <li><a href="#">Menu item 1</a></li>
            </ul>
        </div>      
    </div>
</div>

</body>

find out elemet`s real height with js, when css height is set to 0

2 Answers2