如何用JavaScript修改<div>元素背景色？深色模式书签工具开发问题

你之前用document.div.style无效的原因是document对象没有div这个直接属性，document.body是特例——body是HTML文档的特殊根元素，document提供了直接访问它的属性，但普通的div元素需要通过选择器方法获取。

下面是几种可行的实现方案：

方案1：遍历所有div元素逐个设置样式 #

用document.querySelectorAll('div')获取页面中所有div元素，再通过循环遍历给每个元素设置样式：

const allDivs = document.querySelectorAll('div');
allDivs.forEach(div => {
  div.style.backgroundColor = 'black';
  div.style.color = 'white';
});

方案2：用CSS类批量修改（更推荐） #

这种方式不用遍历每个元素，性能更优，也更易维护：

1. 先定义一个深色模式的CSS类（通过JavaScript动态插入到页面）：

// 动态创建样式标签并插入到head
const style = document.createElement('style');
style.textContent = `
  .dark-mode div {
    background-color: black;
    color: white;
    /* 可按需添加更多样式，比如边框、链接颜色等 */
  }
  /* 可选：给所有元素统一设置深色样式 */
  .dark-mode * {
    color: white !important;
  }
`;
document.head.appendChild(style);

2. 给body添加这个类，让样式全局生效：

document.body.classList.add('dark-mode');

如果需要强制覆盖页面原有样式，可在CSS属性后加!important（谨慎使用，避免样式冲突）。

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