javascript - 如何在执行 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;
}

正如您在上表中看到的，第二列显示了一个提交输入标签，这个:

<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 代码片段中未显示的表单的某些字段执行一些验证。

我想做以下事情:

当执行脚本时，具有 id=treeFormContainer 的 div 的 CSS min-height: 200px; 会自动更改为 min-height: 50px;

我该怎么做？

Answer 1

你可以使用这个代码

$(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;
  });
});