获取表单元素的大小和位置

Question

我需要获取表单的大小和位置。然后制作一个具有相同大小和位置的div。但我无法获得形式的大小。

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

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

我尝试使用offsetHeight和clientHeight，但结果总是为0。

Answer 1

打开Chrome控制台。单击指向左上角框的箭头。点击有问题的div，它会以像素为单位给出大小。

Answer 2

如果您可以使用jQuery，则可以使用jQuery.height() ...

如果你不能使用jQuery，你可以查看jQuery source code并找出他们的.height（）是如何工作的。

Here is a working codepen with jQuery

JS：

var form = $("form");

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

您还可以查看jQuery的position()函数，以便更轻松地完成所有计算。