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

我在JavaScript和jQuery方面是个新手，我有以下问题。在一个页面中，这个div具有id=“treeFormContainer”

正如您在上一个表中所看到的，在第二列中显示了一个提交输入标记，该标记：

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

此脚本仅对上一个HTML代码段中未显示的表单的某些字段执行一些验证

我想做以下事情：

执行脚本时，CSSmin height:200pxid=treeFormContainer的div的strong>自动更改为min height:50px

---

我该怎么做呢？

如果我理解正确，您只需要更改

treeFormContainer

div的最小高度，因此使用jquery的css方法非常简单

以下是一些关于JQuery的有用文档：

您可以使用此代码

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

---

或者不使用jQuery

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

---

下面是一个供您参考的示例

clickSubmitButton是如何执行validateForm（）的？此外，由于它是一个提交按钮，它很可能会刷新您的页面，除非您阻止该事件。。。但事实似乎并非如此。因此，即使更改css，页面仍将刷新。也许您首先要将“提交”按钮更改为常规按钮？（然后在单击、选中并稍后提交时应用css规则…？（还有，您的标签指向提交按钮的位置？）

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;

}

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

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

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