批量设置元素几何尺寸需确保单位字符串（如"200px"），可用Object.assign简洁赋值；推荐CSS自定义属性+class解耦逻辑并支持动画；封装工具函数可自动补单位；慎用offsetWidth等触发重排。
直接通过 element.style 批量设置几何尺寸（如 width、height、top、left 等）时，必须注意：每个属性值都需为带单位的字符串（如 "200px"），且不能省略单位（px、%、rem 等），否则无效。
用 Object.assign 一次性赋值多个 style 属性
避免重复写 el.style.xxx = yyy，可把样式对象传给 Object.assign：
const el = document.getElementById('box');
Object.assign(el.style, {
width: '300px',
height: '200px',
top: '10px',
left: '50px',
position: 'absolute'
});✅ 优点：简洁、可读性好；❌ 注意：所有值必须是字符串，且单位不可遗漏（例如 width: 300 不生效）。
用 CSS 自定义属性 + class 控制批量尺寸（推荐用于响应式或主题切换）
当多个元素需统一调整尺寸逻辑，或尺寸依赖 JS 计算结果时，更适合用 CSS 变量配合 class：
立即学习“Java免费学习笔记（深入）”；
- 先在 CSS 中定义变量和规则：
.resizable {
width: var(--w, 100px);
height: var(--h, 50px);
top: var(--t, 0);
left: var(--l, 0);
}- JS 中动态设置变量值（支持批量更新多个元素）：
const elements = document.querySelectorAll('.resizable');
elements.forEach(el => {
el.style.setProperty('--w', '250px');
el.style.setProperty('--h', '180px');
el.style.setProperty('--t', '20px');
el.style.setProperty('--l', '30px');
});✅ 优势：逻辑解耦、便于复用、支持 CSS 过渡动画；✅ 支持数值计算后拼接单位（如 el.style.setProperty('--w', width + 'px')）。
封装一个批量设置尺寸的工具函数
若频繁操作几何尺寸，可封装通用函数，自动补单位（默认 px）并过滤非法值：
function setRect(el, props) {
const unit = 'px';
for (const [prop, val] of Object.entries(props)) {
if (val == null) continue;
const value = typeof val === 'number' ? val + unit : String(val);
el.style[prop] = value;
}
}
<p>// 使用示例
setRect(document.getElementById('box'), {
width: 400,
height: 200,
top: '15%',
left: 30,
borderRadius: '8px' // 非几何属性也兼容
});⚠️ 注意：setRect 不处理 transform 类属性（如 translateX），这类应单独用 style.transform 设置。
慎用 offsetWidth/offsetHeight 触发重排后立即改尺寸
如果需要“先读尺寸再设新尺寸”，要小心浏览器重排（reflow）性能问题。例如：
const el = document.getElementById('box');
const oldW = el.offsetWidth; // 强制重排
el.style.width = (oldW * 1.2) + 'px'; // 再次触发重排✅ 更优做法：用 getBoundingClientRect() 或将读写操作分批，或使用 requestAnimationFrame 缓冲：
requestAnimationFrame(() => {
el.style.width = '320px';
el.style.height = '192px';
});避免在循环中反复读写，尤其对大量元素。
