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

和以下 CSS 相关的div：

#treeFormContainer {
    min-height: 200px;
}

正如您在前面的 table 中看到的那样，在第二列中显示了一个 提交输入标签 ，这个：

<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 min-height: 200px; 的 div 具有 id=treeFormContainer 自动更改为 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';

这里有一个fiddle供大家参考

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

How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

html

javascript

css

xhtml

jquery