How to change <i> tag using javascript?

Question

我在一个网站上工作，该网站当前使用 标签和我在 fontawesome.com 上找到的类。它看起来像这样：

<li id="icon" class="hvr-underline-from-left notdropdown"><span><i class="fas fa-moon"></i></span></li>

id="icon" 用于执行 javaScript 代码以在明暗模式之间切换。在 css 中，我声明了具有该网站使用的颜色的变量，并使用 JavaScript 我切换了这两个调色板。

CSS：

:root{
    --primary-color: #ffffff ;
    --secondary-color: #eeeeee;
    --tertiary-color: #192b85;
    --text-color: #000000;
}
.dark-theme{
    --primary-color: #1c1d1f;
    --secondary-color: #252b30;
    --text-color: #ffffff;
}

JavaScript：

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

$(document).ready(function() {
    $("#icon").click(function()
    {
        $("body").toggleClass("dark-theme");
        
    });
});
  

我想将 标签提供的月亮图标更改为来自同一个网站的太阳图标，当我按下它并进入黑暗模式时。

我试着添加这个：

  if(document.body.classList.contains("dark-theme"))
        {
          iconFlip.classList = "fa-solid fa-sun";
        }

进入我的功能，但它不起作用 我还尝试将 id= sun 添加到 标签并将其添加到 javascript 代码中：

if(document.body.classList.contains("dark-theme"))
        {
          sun.setAttribute('class', "fas fa-sun");
        }

Answer 1

由于您正在更改由元素生成的图标，因此将 id="iconFlip" 添加到元素而不是