如何在JavaScript中添加大量CSS时减少DOM操作并提升可读性

嘿，这个需求太常见了——既要减少DOM操作的性能开销，又不想把代码写成一团乱麻的长字符串。给你分享几个实用的方案，兼顾性能和可读性：

1. 用 Object.assign() 批量赋值样式对象 #

这是我个人最常用的方法，代码结构清晰，而且本质上只触发一次DOM更新（浏览器会合并style对象的多属性修改，避免多次重绘）。

你可以把所有要设置的样式整理成一个普通JS对象，然后用Object.assign()直接合并到元素的style属性上：

function createNavbar() { 
  let nav = '<div class="navbar" id="nav"></div>'; 
  this.body.insertAdjacentHTML("beforeend", nav); 
  let navBar = document.getElementById("nav"); 

  // 把样式都放进一个对象里，一目了然
  const navStyles = {
    display: "block",
    background: this.navColors.notice.bg,
    color: this.navColors.notice.textColor,
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: this.navColors.notice.borderColor,
    top: this.navPositionValue[this.position].top,
    right: this.navPositionValue[this.position].right,
    bottom: this.navPositionValue[this.position].bottom,
    left: this.navPositionValue[this.position].left
  };

  // 一次性合并到style，仅一次DOM操作
  Object.assign(navBar.style, navStyles);
}

这个方法的好处是：

• 样式结构清晰，每个属性单独一行，可读性拉满
• 不会覆盖元素原有的inline样式（只会合并/替换指定的属性）
• 完全原生API，不需要任何库依赖

2. 用模板字符串优化 cssText #

如果你还是倾向于用cssText，可以把长字符串拆成多行模板字符串，既保持一次DOM操作，又能让代码可读：

function createNavbar() { 
  let nav = '<div class="navbar" id="nav"></div>'; 
  this.body.insertAdjacentHTML("beforeend", nav); 
  let navBar = document.getElementById("nav"); 

  navBar.style.cssText = `
    display: block;
    background: ${this.navColors.notice.bg};
    color: ${this.navColors.notice.textColor};
    border: 1px solid ${this.navColors.notice.borderColor}; /* 可以把border的三个属性合并写 */
    top: ${this.navPositionValue[this.position].top};
    right: ${this.navPositionValue[this.position].right};
    bottom: ${this.navPositionValue[this.position].bottom};
    left: ${this.navPositionValue[this.position].left};
  `;
}

注意：cssText会完全替换元素原有的inline样式，如果之前有其他inline样式会被清除，这点要留意。不过在你的场景里，刚创建的元素没有原有样式，所以没问题。

3. 用CSS类 + CSS变量（推荐长期维护的项目） #

如果这个导航栏的样式是可复用的，或者你想遵循「样式归CSS，逻辑归JS」的分离原则，那最好的方法是提前在CSS里定义类，用CSS变量来处理动态值：

首先在CSS里写好类和变量：

.navbar-notice {
  display: block;
  background: var(--nav-notice-bg);
  color: var(--nav-notice-text-color);
  border: 1px solid var(--nav-notice-border-color);
}

然后在JS里设置变量并添加类：

function createNavbar() { 
  let nav = '<div class="navbar" id="nav"></div>'; 
  this.body.insertAdjacentHTML("beforeend", nav); 
  let navBar = document.getElementById("nav"); 

  // 设置全局CSS变量
  const root = document.documentElement;
  root.style.setProperty('--nav-notice-bg', this.navColors.notice.bg);
  root.style.setProperty('--nav-notice-text-color', this.navColors.notice.textColor);
  root.style.setProperty('--nav-notice-border-color', this.navColors.notice.borderColor);

  // 批量设置位置样式（位置如果是动态的，也可以用变量，这里直接用Object.assign更方便）
  Object.assign(navBar.style, {
    top: this.navPositionValue[this.position].top,
    right: this.navPositionValue[this.position].right,
    bottom: this.navPositionValue[this.position].bottom,
    left: this.navPositionValue[this.position].left
  });

  // 添加预定义的CSS类
  navBar.classList.add('navbar-notice');
}

这种方法的优势是：

• 样式集中在CSS里，更容易维护和修改
• 变量可以在多个地方复用，比如其他组件也用同色系的话，只需要改一次变量
• JS代码更简洁，只负责动态值和类的切换

总结一下：

• 快速实现且不需要改CSS：用Object.assign()
• 喜欢用CSS语法写样式：用模板字符串版的cssText
• 长期维护/复用性高：用CSS类+CSS变量

内容的提问来源于stack exchange，提问作者theFrontEndDev