如何切换.setAttribute？

Question

我知道有一个.toggle来处理像切换类这样的事情，但对于这个问题，我似乎不能这么做。我试图切换一个图像从月亮到太阳(光明和黑暗的主题)。

我得到了一个函数，当一个锚标签被点击时，它会从一个月亮变成一个太阳，但是我想不出如何让它切换。

如果我不能使用.toggle，那么我应该使用什么？我是否需要使用Javascript逻辑创建自己的函数？是否已经有脚本可以这样做了？

“Javascript代码”：

function changeTheme() {  
  document.getElementById("theme").setAttribute("src", "sun.png"); 
}

HTML代码：

<img onclick="changeTheme()" src="moon.png" id="theme" class="toggle-theme">

(课程在那里进行实际的主题更改.)

谢谢你的回答！

注意:这是我关于堆栈溢出的第一篇文章。如果我做错了什么，或者你需要更多的信息，请告诉我。谢谢。

Answer 1

只是建议，因为它帮助我分配在创建主题-开关，使用HTML attribute property来跟踪他们。

从不根据图像名称或源代码编写条件，它使您的代码变得可靠，而且它也不是编程的好方法。

当你必须切换网站的主题时，CSS的跟踪是非常重要的。

​

function changeTheme() {
  const domRef = document.getElementById("theme");

  if (domRef.getAttribute("data-theme-name") === "dark") {
    domRef.setAttribute("data-theme-name", "light");
    domRef.setAttribute("src",
    "https://img.icons8.com/bubbles/50/000000/adobe-photoshop.png");
  } else {
    domRef.setAttribute("data-theme-name", "dark");
    domRef.setAttribute("src","https://img.icons8.com/bubbles/50/000000/adobe-animate.png");
  }
}

.toggle-theme {
   height: 15vh;
   
}

   <img onclick="changeTheme()" 
    data-theme-name="dark"
    src="https://img.icons8.com/bubbles/50/000000/adobe-animate.png" id="theme" class="toggle-theme">

​