jQuery width()方法：获取和设置元素宽度-代码号

前端开发里，精确控制元素的尺寸是非常高频的需求。jQuery 提供了一组尺寸相关的方法，width() 是其中最基础的一个。它既能读取元素的当前宽度，也能给元素设置新的宽度值，一个方法完成两种操作，写起来很顺手。

不过这里有一个容易掉进去的认知误区需要先说明：width() 操作的是元素的内容宽度，不包含 padding、border 和 margin。很多初学者以为拿到的是整个盒子在页面上占据的宽度，结果计算布局的时候对不上，原因就在这里。如果确实需要包含内边距或边框的宽度，后面会讲到需要用 innerWidth() 或 outerWidth()。

语法形式

width() 有三种调用方式，分别对应获取宽度、设置固定宽度、通过函数动态设置宽度。

获取宽度：

$(selector).width()

调用时不传任何参数，返回第一个匹配元素的宽度值，单位是像素（px），但返回结果是一个纯数字，不带单位后缀。

设置固定宽度：

$(selector).width(value)

传入一个数值或字符串，给所有匹配的元素统一设置宽度。如果不写单位，默认就是 px。也可以显式指定 em、pt 等其他 CSS 单位。

通过函数设置宽度：

$(selector).width(function(index, currentwidth){
    return 新的宽度值;
})

这个形式特别适合需要根据元素当前状态或位置来差异化设置宽度的场景。回调函数的 index 是元素在中的索引，currentwidth 是它当前的宽度值。

代码示例

下面这个基础示例演示如何读取一个 div 的宽度。点击按钮后用 alert 弹出宽度数值，可以看到结果是一个纯数字，跟 CSS 里写的 200px 对应。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取元素宽度示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid #3498db;background-color:#eaf2f8;"></div>
    <br>
    <button id="getWidthBtn">获取 div 宽度</button>

    <script>
        $(document).ready(function(){
            $("#getWidthBtn").click(function(){
                alert("当前 div 的内容宽度为：" + $("div").width() + "px");
            });
        });
    </script>
</body>
</html>

运行这个示例你会发现，虽然 CSS 设置了 width:200px，但 width() 返回的就是 200，padding 那 10px 并没有被算进去。这就是前面强调的“只算内容区域”的含义。很多人第一次用的时候会跟 outerWidth() 搞混，调试半天才发现问题。

动态设置宽度的实战场景

实际项目中，经常需要让一组元素的宽度依次递减，形成一种渐进式的视觉效果。下面的例子用函数参数实现了这个效果：五个方块，点击哪个就把哪个宽度设为一个递减值，后续点击依次减少。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态设置宽度示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .box {
            width: 100px;
            height: 80px;
            float: left;
            margin: 5px;
            background: #f39c12;
            cursor: pointer;
            line-height: 80px;
            text-align: center;
            font-weight: bold;
        }
        .box-modified {
            background: #27ae60;
            cursor: default;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>

    <script>
        var stepWidth = 70;
        $("div.box").one("click", function(){
            $(this).width(stepWidth).addClass("box-modified");
            stepWidth -= 10;
        });
    </script>
</body>
</html>

代码里用了 jQuery 的 one() 方法，保证每个方块只能被点击一次、宽度只改变一次。stepWidth 从 70 开始每次减 10，这样五个方块依次点击后宽度分别是 70、60、50、40、30。这种写法在制作可交互的教学演示或者小游戏界面时很实用。

关于单位的小细节

width() 设置值时，如果传的是纯数字，jQuery 默认按 px 处理。这在大多数场景下没问题，但如果你的布局用了 rem 或百分比这种相对单位，直接传数字就不合适了。这时候需要显式写成字符串，比如：

$(".container").width("80%");
$(".sidebar").width("20em");

我个人习惯在项目里统一用像素值做精确控制，响应式部分交给 CSS 媒体查询处理，JS 里尽量只操作 px，避免单位混用带来的计算麻烦。当然这只是习惯问题，具体选哪种还是要看项目需求。

jQuery 尺寸方法一览

width() 只是 jQuery 尺寸系列方法中的一个，完整列表包括六个：

方法	含义
`width()`	内容宽度（不含 padding、border、margin）
`height()`	内容高度（不含 padding、border、margin）
`innerWidth()`	内容宽度 + 左右 padding
`innerHeight()`	内容高度 + 上下 padding
`outerWidth()`	内容宽度 + 左右 padding + 左右 border
`outerHeight()`	内容高度 + 上下 padding + 上下 border

如果调用 outerWidth(true)，还会把 margin 也算进去。这个参数在设计拖拽排序、碰撞检测等功能时经常会用到。

本节课程知识要点

width() 获取的是内容区宽度，不包含 padding、border、margin，这一点要跟 CSS 的 box-sizing 属性区分开理解。
返回值是纯数字，不带 px 单位，方便直接参与数学运算，做加减比较都很顺手。
设置宽度时优先传数字使用默认 px 单位，需要其他单位时传字符串，注意字符串格式要写完整。
回调函数的 currentwidth 参数拿到的是当前宽度数值，可以基于它做递增、递减或其他逻辑运算，比写死固定值灵活得多。
如果需要获取包含 padding 或 border 的完整尺寸，记得换成 innerWidth() 或 outerWidth()，别硬用 width() 手动加，容易漏算或重复算。

width() 是一个表面简单但细节不少的方法。掌握它的核心在于理解“内容宽度”这个概念边界，以及三种调用形式各自适用的场景。日常开发中，读取元素尺寸做布局调整、动态设置宽度实现交互动效，这两个需求用 width() 基本都能覆盖。配合 jQuery 尺寸家族的另外五个方法，构成了一套完整的元素尺寸操作体系，值得花时间逐个理解透彻。

本文标签：

jQuery width()方法：获取和设置元素宽度