jQuery innerHeight() 方法

jQuery 中的 innerHeight() 方法用於獲取匹配元素集中第一個匹配元素的內部高度，包括內邊距，但不包括邊框和外邊距。

此方法返回第一個匹配元素的內部高度（以畫素為單位），結果為整數。如果沒有匹配元素，則返回undefined。

語法

以下是 jQuery 中 innerHeight() 方法的語法：

$(selector).innerHeight()

引數

此方法不接受任何引數。

示例 1

在下面的示例中，我們使用 innerHeight() 方法返回所選元素的內部高度：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const innerHeight = $("div").innerHeight();
                alert("Inner height of the element: " + innerHeight);
            });
        });
    </script>   
</head>
<body>
    <div style="height: 60px; width: 150; padding: 20px; border: 2px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button>Get Inner Height</button>
</body>
</html>

在上面的程式中，選定的元素是<div>。當我們單擊按鈕時，innerHeight() 方法將返回該<div>元素的內部高度。

示例 2

在這裡，我們建立了多個<div>元素。因此，當觸發 innerHeight() 方法時，它將返回第一個匹配的 div 元素的內部高度：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                const innerHeight = $("#element").innerHeight();
                alert("Inner height of the first selected element: " + innerHeight);
            });
        });
    </script>
</head>
<body>
    <div id="element" style="height: 50; width: 200px; padding: 20px; border: 2px solid black; background-color: yellow;">
        div element (width: 200px padding: 20px)
    </div>
    <div id="element" style="height: 60; width: 250px; padding: 25px; border: 2px solid black; background-color: yellow;">
        div element (width: 250px padding: 25px)
    </div>
    <div id="element" style="height: 70; width: 300px; padding: 30px; border: 2px solid black; background-color: yellow;">
        div element (width: 300px padding: 30px)
    </div>
    <button>Get Inner Height of first selected element.</button>
</body>
</html>

當我們單擊按鈕時，它將返回匹配集中第一個選定<div>元素的內部高度。

jquery_ref_html.htm

列印頁面