JS变量无法修改元素属性求助：赋值变量为何无法更改实际属性值？

我在练习JavaScript时遇到一个问题：想实现点击div时循环切换其背景色对应的类名，但发现将元素属性赋值给变量（而非直接使用event target）后，修改变量无法改变元素的实际属性值。直接修改e.target.className可以正常生效，但修改赋值后的classes变量却毫无作用，想请教这是什么原因？

我的代码： #

let colors = ["blue", "yellow", "orange", "red"]
let n = 1;

document.querySelectorAll('div').forEach(occurence => {
    occurence.addEventListener('click', (e) => {
        let classes = e.target.className;
        classes = colors[n];
        n++;
        console.log(classes);
        if (n >= 4) {n = 0;}
    });
});

这是因为字符串是值类型，你执行let classes = e.target.className;的时候，只是把e.target.className当前的字符串值复制了一份给classes变量，两者是完全独立的两个值。你后续修改classes变量，只是改变了这个独立副本的内容，根本没和原元素的className属性产生关联，自然不会影响到页面上的元素。

如果要通过变量操作元素类名，得让变量保存元素的引用，而不是只复制属性值：

let colors = ["blue", "yellow", "orange", "red"]
let n = 1;

document.querySelectorAll('div').forEach(occurence => {
    occurence.addEventListener('click', (e) => {
        let targetEl = e.target; // 保存元素引用
        targetEl.className = colors[n]; // 通过引用修改元素属性
        n++;
        if (n >= 4) {n = 0;}
    });
});

另外补充一个优化点：你当前的n是全局变量，多个div点击时会共用这个计数器，可能不符合“每个div独立切换颜色”的预期。如果要让每个div各自维护切换状态，可以把n放到forEach的回调内部，同时用取模运算简化循环逻辑：

let colors = ["blue", "yellow", "orange", "red"];

document.querySelectorAll('div').forEach(occurence => {
    let n = 1; // 每个div拥有独立的计数器
    occurence.addEventListener('click', (e) => {
        e.target.className = colors[n];
        n = (n + 1) % colors.length; // 自动循环，不用手动判断边界
    });
});

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