Getting the hidden element width and height in javascript

Sometimes we might need to get the hidden element width and height. That means when you make the element hidden with css property “display:none”, The element will not render at all. So in this case if we need to get the hidden element height and width we need to make the element position absolute and should make the element x or y value a big negative. So that the element gets rendered but not visible in the html. So that we can get the hidden element height and width.

Example:-

var calc = document.getElementById("datePicker");

calc.style.left = -1023;

calc.style.display = "block";

var calWidth = calc.offsetWidth;

calc.style.display = "none";