jQuery – Get hidden element width

In jQuery, when an element is not visible, the width() returns 0. But involving some CSS properties we can make jQuery think that the element is visible.

For example, you have the following HTML:

<div class="main">
<div class="sub" style="display:none;">John Doe</div>
<div class="sub" style="display:none;">Jane Doe</div>
</div>

If you want to get the hidden element width of “sub” class div then you can use the following tricks:

$( ".sub" ).css({ visibility: "", display: "" });
console.log($( ".sub" ).width());
$( ".sub" ).css({ visibility: "hidden", display: "block" });