如何通过JavaScript修改未绑定DOM元素的CSS类的样式属性

问题原因 #

初始状态下没有任何元素带有.azzeccato类，document.querySelector('.azzeccato')的返回值为null，直接访问null.style会抛出空引用错误。即使后续给元素添加了该类，你提前声明的azzeccato变量也不会自动更新，始终是初始的null值。

最优解决方案（推荐） #

通过父级主题类联动CSS样式实现需求，无需动态操作.azzeccato元素，不管元素什么时候添加该类，都会自动适配当前主题颜色。

1. 新增CSS关联规则 #

在原有CSS代码末尾添加不同主题下的.azzeccato样式：

/* 主题关联azzeccato样式 */
body.theme-green-apple .azzeccato {
  background-color: #2ECC40;
}
body.theme-strawberry .azzeccato {
  background-color: #DE354C;
}
body.theme-maroon .azzeccato {
  background-color: #FF4136;
}
body.theme-blue-sky .azzeccato {
  background-color: #0074D9;
}
body.theme-tin-olive .azzeccato {
  background-color: #266150;
}

2. 优化JS逻辑 #

删除原有代码中直接操作azzeccato.style的所有判断逻辑，简化主题切换函数，切换主题时同步修改body的主题类即可：

const themeEls = document.querySelectorAll('.theme');
const fc = document.querySelector('.Flist');
const themeConfig = [
  {name: 'green-apple', headerColor: '#AAAAAA'},
  {name: 'strawberry', headerColor: '#283747'},
  {name: 'maroon', headerColor: '#85144b'},
  {name: 'blue-sky', headerColor: '#001f3f'},
  {name: 'tin-olive', headerColor: '#DDAF94'},
]
// 初始化默认主题
document.body.className = `theme-${themeConfig[0].name}`;

function themes(e) {
  // 匹配当前点击的主题项
  const currentTheme = e.target.closest('.theme');
  const themeIndex = Array.from(themeEls).indexOf(currentTheme);
  const activeTheme = themeConfig[themeIndex];
  // 切换选中状态
  themeEls.forEach(el => el.classList.remove('backSelection'));
  currentTheme.classList.add('backSelection');
  // 同步修改全局主题类和头部背景色
  document.body.className = `theme-${activeTheme.name}`;
  fc.children[0].style.backgroundColor = activeTheme.headerColor;
}

备选方案（适合不想修改CSS的场景） #

如果不想调整CSS结构，可以每次需要修改样式时重新查询DOM，判断元素存在后再操作：

// 把原来修改azzeccato的部分都按这个格式改造
const azzeccato = document.querySelector('.azzeccato');
if (azzeccato) {
  azzeccato.style.backgroundColor = '对应主题的颜色值';
}

该方案的缺点是后续新增带.azzeccato类的元素不会自动应用当前主题颜色，需要重新执行一遍修改逻辑。

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