How to get DIV size values while it is 'displayed:none', without any size values (Using javascript and CSS)

Question

I'm trying to make an effect using javascript and CSS.

When I try to get the size of a not displayed (display:none) DIV I get 0px width and 0px height.

accpetMessageContainer have 'display: none' when I try to get its size.

{
      var aM = document.getElementById('acceptMessageContainer'); 
      h = aM.clientHeight;
      w = aM.clientWidth;
      supp.style.width = w+'px';
      supp.style.height = h+'px';
}

So supp is assigned 0px width and 0px height.

Is there any way I could get the size values the DIV will have when displayed before displaying it?

I let you this code and everything else on the snippet.

If someone could lend me a hand with that, I wold be really grateful. Thank you for your time.

function acceptOrDecline(id) {
  switch (id) {
    case 'accept':
    {
      if (!document.getElementById('supportLayerIn') ||!document.getElementById('supportLayerOut')) {
        var cont = document.getElementById('contentContainer');
        var w = cont.clientWidth;
        var h = cont.clientHeight;
        var layer = document.createElement('div');
        layer.id = 'supportLayerIn';
        cont.appendChild(layer);
        var supp = document.getElementById('supportLayerIn');
        supp.style.width = w+'px';
        supp.style.height = h+'px';
      }

      /**** assign the class fadeIn to supportLayerIn so it appears in front of the actual content with a fadein effect *****/
      setTimeout(function () {
        supp.classList.add('fadeIn');
      }, 1);

      supp.addEventListener('transitionend', function(e) {
        if (e.propertyName === 'visibility') {
          console.log('fadeIn finished!');
    
  /*** Here is the problem ***/
      var aM = document.getElementById('acceptMessageContainer');
        h = aM.clientHeight;
        w = aM.clientWidth;
        supp.style.width = w+'px';
        supp.style.height = h+'px';
  }

        if (e.propertyName === 'height') {
          console.log('Grow/shrink finished!');
          /***** At the end I change supportLayerIn id to 'supportLayerOut' and remove supp DIV at the end *****/
          supp.id = 'supportLayerOut';
          setTimeout(function () {
            supp.classList.add('fadeOut');
          }, 1);
          setTimeout(function () {
            cont.removeChild(supp);
          }, 501);
        }
      }, false);



      break;
    }

    case 'decline':
    {
      console.log('No thanks');
      break;
    }
    default: console.log('Does nothing...');
  }

}

.main1 {
  max-width: 100vw;
 max-height: 100vh;
 top:0px;
 left:0px;
 width:100vw;
 height:100vh;
}

.wrapper {
  overflow:hidden;
  top: 0px;
  left: 0px;
  max-width: 100%;
  max-height: 90%;
  height: 90%;
  width: 100%;
}

.contentContainer {
  position: relative;
  border: solid;
  border-color: red;
  padding: 0px;
  border-radius: 5px;
  box-shadow: 1px 1px 7px #ccc;
  background-color: green;
}

/******************************************* Formulary ********************************************/
.formContainer {
  display: none;
}

.formContainer.active {
  display: flex;
}


/*************************************** acceptMessage container *************************************/
.acceptMessageContainer {
  display: none;
}

.acceptMessageContainer.active {
  display: flex;
}


/******************************* Hidding/showing classes **********************************/
.inactive {
  display: none;
}

.active {
  display: block;
}


/******************************** Support layer ****************************************/
#supportLayerIn {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s, width 1s linear 0s, height 1s linear 0s;
  z-index: 3;
  top: 0px;
  background-color: white;
}

#supportLayerIn.fadeIn {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s;
}

.fadeIn {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s;
}

#supportLayerOut {
  position: absolute;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s, width 1s linear 0s, height 1s linear 0s;
  z-index: 3;
  top: 0px;
  background-color: white;
}

#supportLayerOut.fadeOut {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s;
}

.fadeOut {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear 0s, visibility 0.5s linear 0s;
}

<!doctype html>
  <head>
  </head>
  <body>
    <div class="main1">
      <div class="wrapper">
  <div class="contentContainer" id="contentContainer">
    <div id="acceptMessageContainer" class="acceptMessageContainer inactive">
     X
    </div>
    <div id="formContainer" class="formContainer active">
   <form id="registryForm" name="registryForm" action="">
     <button type="button" id="accept" onclick="acceptOrDecline(this.id);">Accept</button>
     <button type="button" id="decline" onclick="acceptOrDecline(this.id);">No, thanks</button>
   </form>
    </div>
  </div>
      </div>
    </div>
  </body>
</html>



</html>

Answer 1

You can first set the div to have a display: block, and then get the size. After that you can set it to display:none.

All of this happens in a few milliseconds and nothing show on the screen.

  var aM = document.getElementById('acceptMessageContainer'); 
  aM.style.display = "block";
  h = aM.clientHeight;
  w = aM.clientWidth;
  aM.style.display = "none";
  supp.style.width = w+'px';
  supp.style.height = h+'px';

Answer 2

window.getComputedStyle() displays dimensions of an element even in its non-visibility state.

Try this:

{
    var aM = document.getElementById('acceptMessageContainer'); 
    supp.style.width = window.getComputedStyle(aM).getPropertyValue("width");
    supp.style.height = window.getComputedStyle(aM).getPropertyValue("height"); 
}