jquery点击获取当前高度

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地获取和操作 DOM 元素。

类型

在 jQuery 中，获取元素高度的方法主要有以下几种：

.height()：获取元素的可见高度（不包括边框、内边距和外边距）。
.innerHeight()：获取元素的内部高度（包括内边距）。
.outerHeight()：获取元素的外部高度（包括内边距和边框）。
.outerHeight(true)：获取元素的完整高度（包括内边距、边框和外边距）。

应用场景

当你需要在用户点击某个元素时获取该元素的高度时，可以使用 jQuery 来实现。例如，你可能需要在点击按钮时动态调整页面布局或显示元素的尺寸信息。

示例代码

以下是一个简单的示例，展示了如何在点击按钮时获取当前元素的高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 获取高度示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" style="height: 200px; background-color: lightblue;">
        点击按钮获取我的高度
    </div>
    <button id="getHeightBtn">获取高度</button>

    <script>
        $(document).ready(function() {
            $('#getHeightBtn').click(function() {
                var height = $('#myDiv').height();
                alert('当前高度是：' + height + 'px');
            });
        });
    </script>
</body>
</html>