jQuery | height() 和 innerHeight() 示例

height()是 jQuery 中的一个内置方法，用于检查元素的高度，但不会检查元素的填充、边框和边距。
句法：

$("param").height()

参数：此函数不接受任何参数。
返回值：返回所选元素的高度。

显示 height()函数工作的 jQuery 代码
代码#1：

  

    
    
        $(document).ready(function() {
            $("button").click(function() {
                var msg = "";
                msg += "height of div: " + $("#demo").height();
                $("#demo").html(msg);
            });
        });
    
    
        #demo {
            height: 150px;
            width: 350px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightgreen;
        }
    

  

    
    Click Me!!!
    Click on the button and check the height of the
       element(excluding padding).

  

输出：
在点击“点击我”按钮之前——

点击“点击我”按钮后——

jQuery还包括innerHeight()方法，即，它用于检查元素的内部高度，包括填充。
句法：

$("param").innerHeight()

参数：该函数不接受任何参数。
返回值：返回被选元素的内部高度。
代码#2：

  

    
    
        $(document).ready(function() {
            $("button").click(function() {
                var msg = "";
                msg += "Inner Height of div: " + $("#demo").
                        innerHeight() + "</br>";
                $("#demo").html(msg);
            });
        });
    


    #demo {
        height: 150px;
        width: 350px;
        padding: 10px;
        margin: 3px;
        border: 1px solid blue;
        background-color: lightgreen;
    }

  

    
    Click Me!!!
    Click on the button and check the innerHeight of
       an element(includes padding).

  

输出：
在点击“点击我”按钮之前——

点击“点击我”按钮后——