时间戳

首页 > 解决方案 > 暗模式+更改图片来源

javascript - 暗模式+更改图片来源

问题描述

所以我在我的网站上实施了暗模式，但是我需要更改一些图片才能使其正常运行。我有我需要的图像的明暗版本，但我想知道在启用暗模式时是否有任何方法可以更改图像的来源。

我从这个视频中得到了我的代码：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: Cannot set property 'src' of null”的错误。我需要将图像源更改为启用和禁用的暗模式，因为该功能已保存在 localStorage 上，它会记住上次访问时所做的设置。图像的来源必须基于是否启用了暗模式。

标签： javascripthtml

解决方案

编写的 Javascript 是正确的，但我收到了 id 为空的错误消息。这是因为我将 script 标签放在 image 标签之上，一旦我将它移到 body 标签下，它就会读取 id 并执行该功能。

推荐阅读