如何用JavaScript切换明暗模式的FontAwesome<i>标签图标？

问题根源 #

你当前代码的核心错误是判断条件使用了赋值运算符=，而非比较运算符==/===：

// 错误：这里是赋值操作，不是比较判断
if(document.getElementById("sun").className = "fas fa-moon")

这个赋值语句会直接把图标类名设为fas fa-moon，且表达式返回值为该字符串（永远为真），导致每次点击都会执行第一个分支，永远无法触发else if的逻辑。

修正后的基础代码 #

先修复比较运算符，同时优化元素获取逻辑（提前缓存DOM元素，避免重复查询）：

var iconFlip = document.getElementById("icon");
var darkmodeIcon = document.getElementById("sun"); // 重命名变量更清晰

$(document).ready(function() {
    $("#icon").click(function() {
        $("body").toggleClass("dark-theme");
        
        // 用严格比较运算符 === 判断类名
        if(darkmodeIcon.className === "fas fa-moon") {
            darkmodeIcon.className = "fas fa-sun";
        } else if(darkmodeIcon.className === "fas fa-sun") {
            darkmodeIcon.className = "fas fa-moon";
        }
    });
});

更可靠的优化方案 #

直接基于body的dark-theme类状态来切换图标，比判断图标类名更稳定（避免类名意外变动导致失效）：

var iconFlip = document.getElementById("icon");
var darkmodeIcon = document.getElementById("sun");

$(document).ready(function() {
    $("#icon").click(function() {
        const isDarkMode = $("body").toggleClass("dark-theme").hasClass("dark-theme");
        
        // 根据body的主题类直接设置图标
        if(isDarkMode) {
            darkmodeIcon.className = "fas fa-sun";
        } else {
            darkmodeIcon.className = "fas fa-moon";
        }
    });
});

额外优化：保留原有类名的操作方式 #

如果后续需要给图标添加其他样式类，不想覆盖整个class属性，可以用classList的remove和add方法：

var iconFlip = document.getElementById("icon");
var darkmodeIcon = document.getElementById("sun");

$(document).ready(function() {
    $("#icon").click(function() {
        const isDarkMode = $("body").toggleClass("dark-theme").hasClass("dark-theme");
        
        if(isDarkMode) {
            darkmodeIcon.classList.remove("fa-moon");
            darkmodeIcon.classList.add("fa-sun");
        } else {
            darkmodeIcon.classList.remove("fa-sun");
            darkmodeIcon.classList.add("fa-moon");
        }
    });
});

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