How do I set the width and height of a hidden element by using another hidden element's width and height?

for(i=1;i<10;i++){
   $('#hiddenE1'+i).width($('#hiddenE2'+i).width()).height($('#hiddenE2'+i).height());
}

How do I set the width and height of a hidden element by using another hidden element's width and height?

for(i=1;i<10;i++){
   $('#hiddenE1'+i).width($('#hiddenE2'+i).width()).height($('#hiddenE2'+i).height());
}

• javascript
• jquery
• css

• 1 Your code is correct, assuming you got the selectors right. – Ninjakannon Commented Apr 11, 2015 at 19:23
• @Ninjakannon: Thanks. yes, the code will work only if the elements are not hidden. But the code doesn't work when all $('#hiddenE1'+i) and $('#hiddenE2'+i) are hidden. – Fergoso Commented Apr 11, 2015 at 19:27
• 2 @Ninjakannon is right. Maybe one thing you're tripping over is that it doesn't effect the DOM since they're hidden. Are you using display: none to hide them, try visibility: hidden instead and you should see the width/height changes – ACruz Commented Apr 11, 2015 at 19:29

2 Answers 2

There is no width when display: none. One trick would be to set position: relative; margin-left: -9999px;. It will not show on the page but preserve the width. Or, use visibility: hidden. The only downside is it will not rip it out of the layout but leave a blank spot.

One can create a class with styles to hide the element i.e.

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

In case you'd also want to revert you can use another class e.g.

.unhide {
   position: initial;
   top: initial;
   left: initial;
}

initial is for the default value, otherwise one could use known values read about initial

There are however other ways to hide elements as mentioned on this post

In case the link doesn't work:

1.

.hide {
  opacity: 0;
}

2.

.hide {
   visibility: hidden;
}

3.

.hide {
   display: none;
}

4.

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}