Question

因此，我已经在网站上实现了暗模式，但是需要更改某些图片才能使其正常运行。我有所需图像的明暗版本，但我想知道启用暗模式后是否可以通过任何方式更改图像源。

我从以下视频中获得了代码：https://www.youtube.com/watch?v=wodWDIdV9BY

这是我用于深色模式和HTML中图像的按钮：

<button onclick="changeImage();" id="dark-mode-toggle" class="dark-mode-toggle">Darkmode On/Off</button>

启用暗模式的Javascript（请参见上面的youtube链接）：

let darkMode = localStorage.getItem('darkMode'); 
const darkModeToggle = document.querySelector('#dark-mode-toggle');
const enableDarkMode = () => {
  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {
  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
}
if (darkMode === 'enabled') {
  enableDarkMode();
}

darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode'); 
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});

这是我尝试过的

let darkMode = localStorage.getItem('darkMode'); 

const darkModeToggle = document.querySelector('#dark-mode-toggle');

const enableDarkMode = () => {

    document.getElementById('icon').src="images/twar-white-icon.png"

  document.body.classList.add('darkmode');
  localStorage.setItem('darkMode', 'enabled');
}

const disableDarkMode = () => {

    document.getElementById('icon').src="images/twar-black-icon.png"

  document.body.classList.remove('darkmode');
  localStorage.setItem('darkMode', null);
}
if (darkMode === 'enabled') {
  enableDarkMode();
}

darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode'); 
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});

基本上我添加的是document.getElementById('icon').src="images/twar-white-icon.png"和document.getElementById('icon').src="images/twar-black-icon.png"

但是我一直收到错误消息“ Uncaught TypeError：无法将属性'src'设置为null” 在我的控制台日志中。我需要将图像源更改为启用和禁用的暗模式，因为该功能已保存在localStorage上，该存储可以记住上次访问时所做的设置。图像的来源必须基于是否启用了暗模式。

Answer 1

编写的Javascript是正确的，但是我收到ID为null的错误消息。这是因为我已将script标签放在image标签上方，并将其向下移到body标签之后，它读取了id并执行了该功能。

暗模式+更改图片来源

1 个答案: