1

I need get the size and position of form. And then make a div with the same size and position. But I can't get the size of form.

var form = document.getElementsByTagName("form");

for (var i = 0; i < form.length; i++) {
   console.log(form[i].offsetHeight);
}

I try with offsetHeight and clientHeight, but always the result is 0.

Phyron
  • 613
  • 1
  • 9
  • 25
  • Using something like Chrome's developer tools is awesome to see all the properties that something like `form[i]` has to offer. – KJ Price Feb 10 '16 at 21:37
  • 1
    Why do you want to do this? I do get a height: https://jsfiddle.net/4zoygLxs/. What browser are you using? – putvande Feb 10 '16 at 21:39
  • What's inside the form? Remember that floated and absolutely-positioned elements don't add to the height of the parent. – Blazemonger Feb 10 '16 at 21:44

2 Answers2

2

Open the chrome console. Click on the arrow pointing to the box in the top left corner. Click on the div in question and it will give you the size in pixels.

nwimmer123
  • 79
  • 12
0

If you can use jQuery, you can use jQuery.height()...

If you can't use jQuery, you can look at the jQuery source code and figure out how their .height() works.

Here is a working codepen with jQuery

JS:

var form = $("form");

for (var i = 0; i < form.length; i++) {
   console.log($(form[i]).height());
}

You could also look into jQuery's position() function to possibly do all of your calculations more easily.

Jacob Petersen
  • 1,463
  • 1
  • 9
  • 17
  • Ok, I try this and work fine. But if the form have display:inline, doesn't work. – Phyron Feb 10 '16 at 22:47
  • I changed the form in the codepen to have display: inline, and it still works fine. Need more details – Jacob Petersen Feb 10 '16 at 22:50
  • I try this in [link](http://www.monografias.com/usuario/registro), this form have display:inline, and don't work. If I change the inline for inline-block, the code work. why? – Phyron Feb 10 '16 at 22:58
  • Because inline elements do not have a height. Please see: http://stackoverflow.com/questions/5759554/displayinline-resets-height-and-width – Jacob Petersen Feb 10 '16 at 23:18