如何用JavaScript切换HTML段落的CSS类以实现明暗主题切换？

你之前获取指定段落的方式是错误的，document.classList.pfooldal不是正确的DOM元素获取方式，以下是两种可行的实现思路：

方法一：直接操作目标元素切换类 #

先通过正确的选择器获取到指定段落，再切换对应的样式类：

// 获取单个目标段落元素
const pFooldal = document.querySelector('.p-fooldal');

function toggleDark() {
    // 切换body的主题类
    document.body.classList.toggle('body-light-mode');
    // 切换指定段落的样式类
    pFooldal.classList.toggle('p-fooldal-light-mode');
}

如果页面中有多个带.p-fooldal类的段落，用querySelectorAll批量处理：

// 获取所有目标段落元素
const pFooldalElements = document.querySelectorAll('.p-fooldal');

function toggleDark() {
    document.body.classList.toggle('body-light-mode');
    // 遍历所有元素切换样式类
    pFooldalElements.forEach(el => {
        el.classList.toggle('p-fooldal-light-mode');
    });
}

方法二：利用body主题类控制子元素样式（更简洁） #

无需给每个元素单独切换类，通过body的主题类嵌套控制子元素样式，只需要切换body的类即可：

修改CSS：

.p-fooldal {
    color: black;
}

/* 当body处于light模式时，修改段落样式 */
.body-light-mode .p-fooldal {
    color: white;
}

对应的JS只需保留切换body类的逻辑：

function toggleDark() {
    document.body.classList.toggle('body-light-mode');
}

这种方式无需单独操作每个段落，所有样式变化通过body的主题类统一控制，后期维护更方便。

内容的提问来源于stack exchange，提问作者Benjamin Kovács