时间戳

首页 > 解决方案 > 如何切换 .setAttribute？

javascript - 如何切换 .setAttribute？

问题描述

我知道有一个 .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">

（该课程在那里进行实际的主题更改...）

感谢您的任何回答！

注意：这是我在 Stack Overflow 上的第一篇文章。如果我做错了什么或者您需要更多信息，请告诉我。谢谢你。

标签： javascripthtmlimageclasstoggle

解决方案

只是建议，因为它帮助我在创建主题切换期间分配，使用 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">

推荐阅读