要理解 jQuery.swap 的价值，可以先看一个常见场景：当一个元素被设置为 display:none 后，它的宽度和高度无法直接通过 offsetWidth、offsetHeight 或 getComputedStyle 获得真实的可视尺寸。jQuery 内部通过一个很小的工具函数 jQuery.swap 解决了这个问题。它不依赖定时器，也不插入 DOM 克隆节点，而是在内存中同步完成样式替换、测量、恢复三个步骤。这个函数看似简单，却非常巧妙，是 jQuery 尺寸测量体系的基石之一。
一、jQuery.swap 的源码结构：临时保存、替换与恢复
jQuery.swap 的典型实现非常精简，核心逻辑不超过十行。它接收四个参数：目标元素、需要临时修改的样式对象、读取函数以及可选参数。函数内部先创建一个空对象 old，用来保存每个即将被修改的内联样式旧值。随后遍历样式对象，把旧值记录下来，再把新的临时样式写入元素对象的 style 属性中。
写入完成之后，它立刻调用读取函数，并传入目标元素和可选参数。由于内联样式的改变会立即影响计算值，因此读取函数内部拿到的就是临时样式生效后的计算结果。读取结束后，函数再次遍历样式对象，把之前保存的旧值依次写回。这样即使元素原本没有某个内联样式，恢复阶段也只是把 undefined 或空字符串重新赋给 style 属性，本质上等价于清除临时内联声明。
jQuery.swap = function( elem, options, callback, args ) {
var ret, name,
old = {};
// 先保存每一个将要被修改的内联样式旧值
for ( name in options ) {
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
// 在临时样式生效后执行测量或读取函数
ret = callback.apply( elem, args || [] );
// 无论读取结果如何，都恢复旧值
for ( name in options ) {
elem.style[ name ] = old[ name ];
}
return ret;
};
这个同步过程保证了临时样式不会长时间残留在元素上。由于 JavaScript 执行线程不会中断渲染，外部脚本几乎观察不到样式被替换的中间状态。不过这种简洁实现也有一个潜在问题：如果 callback 内部抛出异常，恢复旧值的代码不会执行，元素会停留在临时样式状态。在实际使用中，jQuery 调用的读取函数通常不会抛错，因此这个隐患很少被触发。
二、为什么读取计算值需要绕过 display:none
从浏览器渲染机制来看，display:none 的元素不会生成盒模型，也不会进入渲染树。它的亮度、位置、尺寸等信息要么不存在，要么计算值没有实际布局意义。例如对一个隐藏元素调用 offsetWidth，返回值几乎总是 0。而 getComputedStyle 虽然有时能返回样式表中的声明值，但如果需要的是真实像素宽度，同样无法可靠获取。
如果为了读取尺寸而直接把元素改成 display:block，会立即影响页面布局，造成闪烁或重排。更麻烦的是，测量完成后还要记得恢复原样式，否则整个界面布局都可能出错。jQuery.swap 的价值就在于它把这种临时状态封闭在一个同步函数里，同时配合三个关键样式：display:block、position:absolute 和 visibility:hidden，让元素在不可见的情况下仍然具备可测量的盒模型。
其中 position:absolute 让元素脱离正常文档流，不会占据原有空间；visibility:hidden 保持元素不可见，但保留盒模型；display:block 则强制元素从 none 回到可布局状态。三者的组合既保证了测量准确性，也避免了对页面其他内容的视觉和布局影响。需要注意的是，这种测量结果反映的是元素在临时样式约束下的尺寸，如果原始元素的 display 不是 block，则可能还需要根据元素类型进一步调整临时显示值。
三、jQuery.swap 在 width 和 height API 中的应用
jQuery 的 .width() 和 .height() 方法在获取隐藏元素尺寸时，会先检查元素的 display 计算值。如果元素不是隐藏状态，并且仍然连接在文档中，就直接调用内部尺寸读取函数；如果元素已经设置为 display:none，则进入 jQuery.swap 流程。这样设计的好处是正常显示的元素走最快路径，只有隐藏元素才付出额外样式替换成本。
在 display:none 的情况下，jQuery 会传入一个包含三个样式的临时对象，并在回调函数中执行尺寸读取。读取函数内部通常使用 offsetWidth、offsetHeight 或 getBoundingClientRect() 来获取实际像素值。读取完成后，swap 自动恢复旧样式，返回值再经过盒模型校正，最终返回给调用方。
if ( display === "none" || !jQuery.contains( elem.ownerDocument, elem ) ) {
jQuery.swap( elem, {
visibility: "hidden",
display: "block",
position: "absolute"
}, function() {
val = getWidthOrHeight( elem, name, extra );
}, extra );
} else {
val = getWidthOrHeight( elem, name, extra );
}
从这段简化代码可以看到，jQuery.swap 并不是一个孤立工具，而是被封装在更高层的尺寸计算逻辑中。它承担的是环境准备和现场恢复的职责，真正的尺寸测量仍然交给专门的函数完成。这种职责分离让 swap 可以被其他需要临时修改样式读取计算值的场景复用，比如获取隐藏元素的外边距、内边距或滚动区域尺寸。
四、手写一个更健壮的 swap：加入异常保护与原型过滤
虽然 jQuery.swap 足够精简，但在现代项目中使用时，可以针对两个细节进行增强。第一是异常保护：如果读取函数发生错误，恢复旧值的逻辑应当放在 finally 块中执行，避免样式状态被污染。第二是属性遍历的安全性：使用 for...in 会遍历到原型链上的可枚举属性，如果传入的样式对象来自 Object.create 或存在原型扩展，就可能误改不相关属性。
改进后的版本可以先用 Object.keys 获取自有属性列表，再结合 try...finally 保证恢复动作一定执行。这样即使测量过程抛出异常，页面样式也能回到初始状态。对于需要多次调用 swap 的业务，这种保护尤其重要。
function safeSwap( elem, options, callback, args ) {
var ret, name;
var old = {};
var names = Object.keys( options );
var i;
for ( i = 0; i < names.length; i++ ) {
name = names[ i ];
old[ name ] = elem.style[ name ];
elem.style[ name ] = options[ name ];
}
try {
ret = callback.apply( elem, args || [] );
} finally {
for ( i = 0; i < names.length; i++ ) {
name = names[ i ];
elem.style[ name ] = old[ name ];
}
}
return ret;
}
在实际业务中使用这类工具时，还需要注意内联样式的优先级问题。临时修改的是元素对象上的 style 属性，属于内联样式，优先级通常高于外部样式表，因此能够可靠覆盖原有规则。恢复旧值时也必须恢复原始内联值，而不是简单清空。如果元素原本就有一个内联的 width:100px，测量结束后应恢复为 100px，而不是变成空字符串，否则会破坏元素自身的状态。另外还要避免在回调函数中反复调用同一个 swap 造成嵌套，必要时可以用栈结构保存多层现场。
jQuery.swap 的核心思想可以概括为：保存现场、构建临时环境、执行测量、恢复现场。这个模式不仅适用于读取隐藏元素尺寸，也可以用来在不受样式表干扰的情况下测试某个 CSS 属性对布局的影响。理解了它的源码和设计动机，开发者在面对类似 DOM 测量需求时，就能更自然地复用这种同步替换与恢复的技巧，而不是通过修改 DOM 结构或使用延时器来绕路。
jQuery.swap临时修改CSS读取计算值修改时间：2026-08-25 08:56:00