在javascript中点击提交按钮后，如何获得表单div +错误消息的高度？答案

【问题标题】：How do you get the height of a form div + error messages after hitting the submit button in javascript?在javascript中点击提交按钮后，如何获得表单div +错误消息的高度？
【发布时间】：2012-01-19 03:19:15
【问题描述】：

所以，我一直试图让这个表单工作（css 和 javascript），但我遇到了一些问题：我有这个表单，而且一切基本上都在工作，除了我有一个用于表单 div 的容器: formbody，以及提交、清除等的容器。顶部 div 设置为 height:auto;位置：绝对；底部设置为，什么都没有。它只有一个宽度。

当用户点击提交按钮时，formbody 需要调整大小，但我不知道如何获取表单的新大小以设置底部 div 的位置。

我刚刚添加了更多的 css - 有一个背景 div 只为表单打开模板 - 我将它设置为相对 - 但 formbody 有一个绝对位置，因为高度需要自动才能调整错误的大小（当我将其设置为不带位置的自动时：绝对，formbody 缩小到 20px）。

    .background {
    width: 0px;
    height: 700px;
    position: relative;
    z-index:999;
    }

.formbody {
    background-image: url('');
    background-repeat: no-repeat;
    background-position: left bottom;
    position:absolute;
    left:0px;
    top:50px;
    width:700px;
    height:auto;
    padding-bottom:20px;
    border:1px solid #d2d2d2;
}

.bottom {
    width:700px;
}

【问题讨论】：

你能解释一下为什么你需要绝对定位表单主体吗？我的第一个建议是避免这种情况，或者将.bottom 与bottom:0px; 一起绝对定位，这样它就会走到底部并将它们包装在相对定位的父容器中。
你能在 jsfiddle.net 中给出你的代码

标签： javascript css

【解决方案1】：

这行得通吗？（这是实时预览：http://jsfiddle.net/rcMGn/1/）

我在这里所做的基本上是获取第一个具有类 formwidth 的节点（根据您的 css）并使用 DOM 模型来获取其样式属性。

函数 getElementsByClass 将返回文档中所有元素的数组，类 formwidth （我假设只有一个）并从数组中获取第一个元素（应该是 1）然后样式化它。

你不需要关心函数... 要获取宽度，只需下面代码的第一行...

formWidth = getElementsByClass('formbody',null,'form')[0].offsetWidth;

要获得高度，请使用这个：

formHeight = getElementsByClass('formbody',null,'form')[0].offsetHeight;

并从Dustin Diaz的文件中复制函数，下面的函数...

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }

    return classElements;
}

【讨论】：

谢谢，我到办公室去试试。昨天一整天都在敲我的头:-)
嗨，我试过这个，但我真正需要它做的是获取表单体高度（一旦用户点击提交）并使用数字更改背景高度（我添加了上面的代码）。它仍然在打破我的大脑。不过谢谢...
我更新了 jsFiddle 页面 ==> here <== 来做你想做的事......并编辑了答案的正文；如果有效，请评价为正确答案！ :)
好吧，我用 jQuery 很简单地做到了……但它没有用。至少，不是在 Mac 上...<script> $( "#grow" ).click(function(){ $( "#background" ).animate( { height: "730" }) }); $( "#shrink" ).click(function(){ $( "#background" ).css({ height: "630" }); }); </script>
所以，我使用此代码为表单设置动画，但它不适用于每个浏览器

【解决方案2】：

类似的东西

<script>

    var formbody_width= $(".formbody").width();

    $(".submit").live("click", function) {

       $(".formbody").css("height", formbody_width + 300 + "px");     

    }

</script>

【讨论】：

我可以试试，虽然这与宽度无关，而是高度。不过，这是 jQuery，对吧？我在我的表单中使用 javascript，而不是 jQuery。我想我可以尝试想出一种在 javascript 中做到这一点的方法。
var formbody_height = $(".formbody").height(); $(".submit").live("click", function) { $(".formbody").css("height", formbody_height + 300 + "px"); }