在测量 DOM 元素尺寸时，如果元素处于 display:none 状态，浏览器通常会直接返回宽度和高度为 0。比如一个默认隐藏的弹出层、轮播图面板或表格里的隐藏列，在它们真正显示之前，往往需要先知道真实尺寸来调整布局。jQuery 的 width、height 等 API 之所以能对隐藏元素返回准确数值，内部离不开一个叫 swap 的辅助函数。它并不会永久改变样式，而是临时切换若干 CSS 属性，让元素短暂具备可测量条件，读取完计算值后再把旧样式原样恢复。接下来会把 swap 的实现逻辑拆开，并给出可以直接复用的原生 JavaScript 版本。

一、隐藏元素测量为什么会失效

浏览器只有在元素参与布局时才会为它生成盒模型信息。display:none 会把元素从渲染树中移除，因此 offsetWidth、offsetHeight、clientWidth 以及 getBoundingClientRect 都拿不到有效尺寸，通常返回 0。但是很多交互场景需要在隐藏状态下预先测量，比如初始化一个默认隐藏的轮播图容器，必须知道每张幻灯片的实际宽度，否则切换动画的位移量就是错的。

开发者常见的做法是先执行一次 show 再读取数据，随后立刻 hide。这么做可以拿到尺寸，但会造成短暂的页面闪烁或布局抖动。尤其是在移动端或复杂页面中，反复强制显示隐藏还可能触发额外的重排和重绘。jQuery 采用的方式更细腻：不是粗暴地显示元素，而是临时把 display 改成一个可见值，同时配合 visibility:hidden 和 position:absolute，让元素既不被人眼看到，也不占据文档流空间，读取完成后马上恢复原来的内联样式。

这个思路正是 swap 存在的价值。它把“临时改样式—读取数据—恢复样式”这个重复动作封装起来，让 width、height、innerWidth、outerWidth 等接口在遇到隐藏元素时可以返回接近真实布局的值。对使用者来说无感知，但内部保持了 jQuery 一贯的兼容性处理。

二、swap 的核心实现拆解

jQuery 源码中 swap 函数的结构非常精简。它接收一个元素、一个选项对象、一个回调查询函数以及可选参数，先记录每个待修改属性在元素内联样式上的旧值，再写入临时值，然后执行回调，最后恢复所有旧值。可以用下面的简化代码理解它的工作流程：

function swap(elem, options, callback, args) {
    var old = {};
    var name;
    for (name in options) {
        old[name] = elem.style[name];
        elem.style[name] = options[name];
    }
    var result = callback.apply(elem, args || []);
    for (name in options) {
        elem.style[name] = old[name];
    }
    return result;
}

这段代码的关键在于保存的是 elem.style 上的内联值，而不是 getComputedStyle 返回的计算值。这样做的好处是恢复时不会错误覆盖样式表中的规则。假如某个元素原本通过 class 设置了 display:block，内联样式里没有 display 项，那么 old.display 就是空字符串。回调执行完毕后把空字符串写回 elem.style.display，等价于删除先前临时加上的内联 display，元素会重新回到由 CSS 规则决定的原始状态。

实际调用 swap 时，jQuery 通常传入 display、visibility、position 三个属性。例如获取隐藏元素的宽度可以这样写：

var width = swap(element, {
    display: 'block',
    visibility: 'hidden',
    position: 'absolute'
}, function() {
    return this.offsetWidth;
});

只改 display 虽然能让元素参与布局，但它会突然出现在页面上并占据空间，导致周围内容跳动。加上 visibility:hidden 可以保持元素不可见，而 position:absolute 让它脱离普通文档流，避免把其他元素挤开。三个属性组合起来，就构建了一个既能被测量、又不会对现有页面产生视觉或布局影响的临时环境。

三、在原生 JavaScript 中复用这个技巧

如果不使用 jQuery，完全可以把 swap 思路移植到项目里。下面是一个读取隐藏元素宽高的纯 JavaScript 函数，它同样通过临时替换样式来测量，并且针对原内联样式做了备份和恢复：

function getHiddenSize(el) {
    var style = el.style;
    var oldDisplay = style.display;
    var oldVisibility = style.visibility;
    var oldPosition = style.position;
    style.display = 'block';
    style.visibility = 'hidden';
    style.position = 'absolute';
    var size = {
        width: el.offsetWidth,
        height: el.offsetHeight
    };
    style.display = oldDisplay;
    style.visibility = oldVisibility;
    style.position = oldPosition;
    return size;
}

这个函数已经覆盖了多数测量场景。对于本身不是 display:none 的元素，它同样可以工作，只是临时多设了一次 visibility 和 position。如果元素原本就是绝对定位，position 的旧值可能为 absolute 或 relative，恢复后也不会改变原有布局。需要注意的是，每次调用都会触发浏览器重排，因此不要在高频循环或动画帧里反复测量。

在 jQuery 内部，swap 并不只在尺寸测量中使用。凡是需要临时改变元素状态再读取信息的场合，都可能借助类似机制。例如某些版本中对隐藏元素执行动画前，会先临时设置为可见，计算出起始样式，再还原后启动 CSS transition。这种做法的通用性远超单一 API，值得在组件设计中借鉴。

四、使用 swap 技巧的注意事项

临时修改 display 会强制浏览器重新计算布局。如果页面上有大量隐藏元素需要测量，连续调用会积累不小的性能开销。一个常见的优化方式是把多个隐藏元素的读操作尽量放在同一个时间段内，或者先批量设置临时样式，读取完所有数据后再统一恢复。现代浏览器虽然对连续读写做了一定优化，但强制重排仍然比普通 DOM 查询昂贵得多。

另一个容易忽略的问题是 CSS transition 和 animation。若元素本身定义了 display 切换动画，或者对 visibility、opacity 有过渡，临时写入这些属性可能触发过渡效果，造成读取时机不准确。虽然多数浏览器不会为 display 触发 transition，但 visibility 在某些情况下可以参与过渡。为了避免干扰，可以在测量期间再临时设置 transition:none，或者在恢复后再由开发者手动触发动画。

如果只是想隐藏元素但保留布局空间，visibility:hidden 或 opacity:0 本身就能保留元素尺寸，不需要 swap 参与测量。真正需要 swap 的是 display:none 这种完全脱离文档流的隐藏方式。开发者应根据实际场景选择隐藏策略：不需要保留空间的才用 display:none；需要占据占位但不可见时，优先考虑 visibility。理解了底层渲染差异，再结合 swap 临时切换，就能更精准地控制测量和布局。