主页/jQuery教程/DOM操作与遍历/jQuery元素尺寸与位置操作

jQuery教程

jQuery元素尺寸与位置操作

6,427字
27–41 分钟

jQuery元素尺寸与jQuery位置操作是jQuery DOM操作中的核心内容，常用方法包括width()、height()、innerWidth()、innerHeight()、offset()、position()和scrollTop()，这些方法可便捷获取或设置元素的尺寸信息与位置信息，满足前端页面布局与交互开发需求。

目录

jQuery元素尺寸操作

jQuery提供的尺寸操作方法主要用于获取或设置元素的宽高，根据包含范围的不同分为基础尺寸和内部尺寸两类，适用于不同的布局场景。

width()与height()

width()与height()是最基础的jQuery元素尺寸方法，用于获取或设置元素的内容宽高，不包含内边距（padding）、边框（border）和外边距（margin），仅针对元素本身的内容区域进行操作。

语法

// 获取元素宽度
$(selector).width();
// 设置元素宽度
$(selector).width(value);

// 获取元素高度
$(selector).height();
// 设置元素高度
$(selector).height(value);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery width()与height()示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 5px solid #000;
            margin: 10px;
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // 获取box元素的内容宽度和高度
        var boxWidth = $('#box').width();
        var boxHeight = $('#box').height();
        console.log('内容宽度：' + boxWidth); // 输出200
        console.log('内容高度：' + boxHeight); // 输出150

        // 设置box元素的内容宽度和高度
        $('#box').width(250);
        $('#box').height(180);
        console.log('修改后内容宽度：' + $('#box').width()); // 输出250
        console.log('修改后内容高度：' + $('#box').height()); // 输出180
    </script>
</body>
</html>

innerWidth()与innerHeight()

innerWidth()与innerHeight()用于获取或设置元素的内部宽高，包含元素的内容区域和内边距（padding），但不包含边框（border）和外边距（margin），相较于width()与height()，增加了内边距的范围。

语法

// 获取元素内部宽度
$(selector).innerWidth();
// 设置元素内部宽度
$(selector).innerWidth(value);

// 获取元素内部高度
$(selector).innerHeight();
// 设置元素内部高度
$(selector).innerHeight(value);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery innerWidth()与innerHeight()示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 5px solid #000;
            margin: 10px;
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // 获取box元素的内部宽度和高度（内容+内边距）
        var innerW = $('#box').innerWidth();
        var innerH = $('#box').innerHeight();
        console.log('内部宽度：' + innerW); // 输出240（200+20*2）
        console.log('内部高度：' + innerH); // 输出190（150+20*2）

        // 设置box元素的内部宽度和高度
        $('#box').innerWidth(280);
        $('#box').innerHeight(220);
        console.log('修改后内部宽度：' + $('#box').innerWidth()); // 输出280
        console.log('修改后内部高度：' + $('#box').innerHeight()); // 输出220
    </script>
</body>
</html>

元素尺寸方法对比

不同jQuery元素尺寸方法的包含范围不同，适用场景也有所差异，具体对比如下表所示：

方法描述包含范围
width()获取/设置元素内容宽度仅内容区域
height()获取/设置元素内容高度仅内容区域
innerWidth()获取/设置元素内部宽度内容区域+内边距（padding）
innerHeight()获取/设置元素内部高度内容区域+内边距（padding）

jQuery元素位置操作

jQuery元素位置操作方法用于获取或设置元素在页面中的位置，主要分为元素相对于文档的位置、相对于父元素的位置，以及页面滚动位置三类，精准控制元素的布局展示。

offset()

offset()用于获取或设置元素相对于整个文档（document）的位置，返回一个包含top和left属性的对象，单位为像素（px），top表示元素上边缘距离文档顶部的距离，left表示元素左边缘距离文档左侧的距离，不受父元素定位的影响。

语法

// 获取元素相对于文档的位置
$(selector).offset();
// 设置元素相对于文档的位置
$(selector).offset({top: value, left: value});

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery offset()示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 50px;
        }
        #parent {
            width: 300px;
            height: 300px;
            position: relative;
            left: 50px;
            top: 50px;
            border: 1px solid #000;
        }
        #child {
            width: 100px;
            height: 100px;
            background: #f0f0f0;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
        // 获取child元素相对于文档的位置
        var offset = $('#child').offset();
        console.log('距离文档顶部：' + offset.top + 'px'); // 输出120（50+50+20）
        console.log('距离文档左侧：' + offset.left + 'px'); // 输出120（50+50+20）

        // 设置child元素相对于文档的位置
        $('#child').offset({top: 200, left: 200});
        var newOffset = $('#child').offset();
        console.log('修改后距离文档顶部：' + newOffset.top + 'px'); // 输出200
        console.log('修改后距离文档左侧：' + newOffset.left + 'px'); // 输出200
    </script>
</body>
</html>

position()

position()用于获取元素相对于最近的已定位（position为relative、absolute、fixed）父元素的位置，返回一个包含top和left属性的对象，单位为像素（px），若父元素均未定位，则相对于文档定位，仅支持获取，不支持设置。

语法

// 获取元素相对于最近已定位父元素的位置
$(selector).position();

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery position()示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 50px;
        }
        #parent {
            width: 300px;
            height: 300px;
            position: relative;
            left: 50px;
            top: 50px;
            border: 1px solid #000;
        }
        #child {
            width: 100px;
            height: 100px;
            background: #f0f0f0;
            position: absolute;
            left: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    <script>
        // 获取child元素相对于最近已定位父元素（parent）的位置
        var pos = $('#child').position();
        console.log('距离父元素顶部：' + pos.top + 'px'); // 输出20
        console.log('距离父元素左侧：' + pos.left + 'px'); // 输出20

        // position()不支持设置，以下代码无效
        $('#child').position({top: 50, left: 50});
    </script>
</body>
</html>

scrollTop()

scrollTop()用于获取或设置元素的滚动条垂直滚动距离，当作用于document或window时，获取的是页面滚动条的垂直滚动距离；当作用于可滚动的元素（如设置了overflow: scroll的div）时，获取的是该元素内部滚动条的垂直滚动距离，单位为像素（px）。

语法

// 获取滚动条垂直滚动距离
$(selector).scrollTop();
// 设置滚动条垂直滚动距离
$(selector).scrollTop(value);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery scrollTop()示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        body {
            height: 1500px;
            margin: 0;
        }
        #scrollBox {
            width: 300px;
            height: 200px;
            overflow: auto;
            border: 1px solid #000;
            margin: 20px;
            padding: 10px;
        }
        #btn {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="scrollBox">
        测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
        测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
        测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>测试滚动内容<br>
    </div>
    <button id="btn">回到顶部</button>
    <script>
        // 监听页面滚动，获取页面滚动距离
        $(window).scroll(function() {
            var pageScroll = $(window).scrollTop();
            console.log('页面滚动距离：' + pageScroll + 'px');
        });

        // 获取滚动盒子内部的滚动距离
        $('#scrollBox').scroll(function() {
            var boxScroll = $('#scrollBox').scrollTop();
            console.log('滚动盒子滚动距离：' + boxScroll + 'px');
        });

        // 点击按钮，设置页面滚动到顶部（滚动距离为0）
        $('#btn').click(function() {
            $(window).scrollTop(0);
            $('#scrollBox').scrollTop(0);
        });
    </script>
</body>
</html>

元素位置方法对比

offset()、position()与scrollTop()的功能、参考对象及使用场景存在明显差异，具体对比如下表所示：

方法功能参考对象是否支持设置
offset()获取/设置元素位置整个文档（document）是
position()获取元素位置最近的已定位父元素否
scrollTop()获取/设置滚动条滚动距离元素自身（页面或可滚动元素）是

jQuery元素尺寸与位置方法版本变化

jQuery元素尺寸与位置相关方法在不同版本中存在部分细节变化，主要集中在方法支持范围和隐藏元素处理上，具体变化如下表所示：

方法版本变化说明
width()/height()jQuery 1.0+ 支持基础功能；jQuery 1.2+ 支持为隐藏元素获取宽高（此前隐藏元素返回0）；jQuery 3.0+ 移除了对IE6/7的特殊处理，统一了隐藏元素宽高的计算逻辑。
innerWidth()/innerHeight()jQuery 1.2+ 新增该方法；jQuery 3.0+ 优化了内边距的计算精度，修复了部分浏览器下内边距包含边框的bug。
offset()jQuery 1.2+ 支持基础功能；jQuery 1.3+ 优化了定位元素的计算逻辑，修复了父元素为fixed时的位置偏差；jQuery 3.0+ 修复了文档缩放时位置计算不准确的问题。
position()jQuery 1.2+ 支持基础功能；jQuery 1.3+ 完善了对嵌套定位元素的处理，能够正确识别最近的已定位父元素；jQuery 3.0+ 保持功能稳定，无重大变更。
scrollTop()jQuery 1.0+ 支持基础功能；jQuery 1.2+ 支持为window和document对象设置滚动距离；jQuery 3.0+ 优化了滚动动画的流畅度，修复了部分浏览器下滚动距离计算偏差的问题。

jQuery元素尺寸与位置操作是前端开发中实现页面布局、元素定位和滚动交互的关键，掌握width()、height()、innerWidth()、innerHeight()、offset()、position()和scrollTop()的用法及区别，能高效完成各类DOM布局需求，提升开发效率与页面体验。

最新发布