如何在JavaScript中为节点集合的每个元素设置独特样式并可恢复？

嘿，这个场景我经常遇到——直接操作element.style.left确实会让后续的样式重置变得棘手，毕竟你得手动把它改回预设值，万一预设值不是固定的（比如继承或者媒体查询里的变化），那就更麻烦了。用CSS类结合自定义属性绝对是更靠谱的方案，既保留了动态计算的灵活性，又能轻松切换回预设样式，咱们一步步来实现：

1. 先搭好基础的CSS结构 #

首先在样式表里定义好元素的预设样式，再专门写一个类来控制动态偏移的状态，同时用CSS自定义属性（变量）来存储每个元素独有的宽度值：

/* 预设样式 - 这是你希望hover时恢复的样式 */
.target-element {
  position: relative; /* 确保left属性生效 */
  left: 0; /* 示例预设值，根据你的实际需求调整 */
  transition: left 0.3s; /* 可选，加个过渡动画更丝滑 */
}

/* 动态偏移的类 - 只有当这个类存在时，才应用计算后的left值 */
.target-element.shifted {
  left: calc(-1 * var(--element-width));
}

2. 用JS批量设置动态样式 #

接下来获取节点集合，循环给每个元素设置对应的宽度变量，再添加上控制类：

// 获取所有目标元素
const elements = document.querySelectorAll('.target-element');

// 遍历每个元素，设置动态参数并激活偏移样式
elements.forEach(element => {
  // 把当前元素的宽度存入CSS变量
  element.style.setProperty('--element-width', `${element.offsetWidth}px`);
  // 添加类来启用偏移样式
  element.classList.add('shifted');
});

3. 处理hover事件的样式重置 #

现在要实现hover时恢复预设样式就超简单了——只需要在hover时移除.shifted类，鼠标离开时再添回来（如果需要的话）：

// 给每个元素绑定hover事件
elements.forEach(element => {
  element.addEventListener('mouseenter', () => {
    // 移除类，自动回到预设的left样式
    element.classList.remove('shifted');
  });

  element.addEventListener('mouseleave', () => {
    // 鼠标离开后重新添加类，恢复偏移样式
    element.classList.add('shifted');
  });
});

为什么这个方案更好？ #

• 避免了直接操作内联样式的混乱：所有样式逻辑都集中在CSS里，JS只负责控制类的切换和变量赋值，代码更清晰。
• 轻松适配预设样式的变化：如果你的预设left值后续需要修改（比如响应式调整），只改CSS就行，不用动JS。
• 内联样式的优先级问题解决了：CSS类的样式会覆盖预设，移除类后自然回到预设，不需要手动重置element.style.left。

当然，如果你的场景里不需要保留偏移样式（比如hover后就永久恢复），那只需要处理mouseenter事件移除类就行，根据你的实际需求调整~

内容的提问来源于stack exchange，提问作者Gergő Horváth