执行JavaScript时，如何自动更改div的CSS最小高度值？

Question

我绝对不是JavaScript和jQuery的新手，但存在以下问题。 在页面中，我的这个div具有id =“ treeFormContainer”

<div id="treeFormContainer">
    <table id="aui_3_2_0_1108" width="100%" border="0">
        <tbody id="aui_3_2_0_1107">
            <tr id="aui_3_2_0_1106">
                <td id="leftColumn" width="33.3%">
                    <!-- SHOW SOMETHING  -->
                </td>

                <td id="rightColumn" width="66.6%">
                    <!-- SHOW SOMETHING  -->
                    <div id="wwctrl_submitEventButton" align="right">
                        <input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

以下是与此div相关的CSS：

#treeFormContainer {
    min-height: 200px;
}

如您在上表中所看到的，在第二列中显示了一个commit输入标签 ，这是一个：

<input id="submitEventButton" 
       type="submit" 
       onclick="return clickSubmitButton();" 
       value="Submit">

当用户单击此按钮时，将执行以下JavaScript方法：

function validateForm() {
    var selectedProjectStatus = document.getElementById("selectStatus");
    var indexSelectedStatus = selectedProjectStatus.selectedIndex;

    var selectedProjectStatusText = selectedProjectStatus.options[selectedProjectStatus.selectedIndex].text;

    // VALIDAZIONE DEL PROJECT NAME:
    if( document.getElementById('kmProjectInfo_name').value == "" )
    {
        alert( "Please provide a valid project name" );
        //document.myForm.Name.focus();
        document.getElementById('kmProjectInfo_name').focus();
        return false;
    }

    //............................................................
    //............................................................
    //............................................................

    return false;

}

该脚本仅对先前HTML代码段中未显示的表单的某些字段执行某些验证。

我想做以下事情：

执行脚本时，CSS 最小高度：200像素； 具有id = treeFormContainer的div的值会自动更改为min-height：50px；

我该怎么做？

Answer 1

如果我正确理解，您只想更改treeFormContainer div的最小高度，那么使用jquery的css方法就很容易了。

这是有关JQuery的一些有用的文档： http : //api.jquery.com/css/

$("#treeFormContainer).css("min-height", "50px");

Answer 2

您可以使用此代码

$(document).ready(function(){
  $("#submitEventButton").click(function(){
    //here is the line you want
    $("#treeFormContainer").css("min-height","50px");
    var indexSelectedStatus = $("#selectStatus").val();
    var selectedProjectStatusText = $("#selectStatus").text();
    if($('#kmProjectInfo_name').val() == "" )
    {
        alert( "Please provide a valid project name" );
        //document.myForm.Name.focus();
        $('#kmProjectInfo_name').focus();
        return false;
    }
    //............................................................
    //............................................................
    //............................................................
    return false;
  });
});

Answer 3

还是不使用jQuery

document.getElementById('treeFormContainer').style.minHeight = '50px';

这是一个小提琴供您参考