时间戳

首页 > 解决方案 > 为什么不切换到不同的颜色？

javascript - 为什么不切换到不同的颜色？

问题描述

我遇到了一个问题，我无法让我的横幅从存储在 sessionStorage 中的内容更改其颜色。我修复了这个问题，但是有一个错误，如果您从未更改过主题，则 sessionStorage 中将没有任何内容，因此横幅将所有颜色设置为黑色。我修复了它，使横幅现在是加载时的默认颜色，但它不会再改变了。

我为 if 语句尝试了多个不同的参数

这是检测代码：

function checkBanner() {
  var textColor = sessionStorage.getItem('textColor');
  var backgroundColor = sessionStorage.getItem('bgColor');

  /*
  Sets color when you've never switched the theme before, but doesn't switch when you switch the theme
  |
  |
  v

  */
  if (sessionStorage.textColor !== 'black' || 'white') {
    var textColor = 'black';
    document.getElementById('banner').style.color = textColor;
  } else {
    document.getElementById('banner').style.color = textColor;
  }

  if (sessionStorage.bgColor !== 'red' || 'purple') {
    var backgroundColor = 'red';
    document.getElementById('banner').style.backgroundColor = backgroundColor;
  } else {
    document.getElementById('banner').style.backgroundColor = backgroundColor;
  }
}

checkBanner();

这是拨动开关代码：

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
  if (e.target.checked) {
    var r = confirm("Are you sure you want to switch on light mode? (It hurts my eyes)");
    if (r == true) {
      document.documentElement.setAttribute('data-theme', 'light');
      localStorage.setItem('theme', 'light'); //add this
      sessionStorage.setItem('bgColor', 'purple');
      sessionStorage.setItem('textColor', 'white');
      document.getElementById('banner').src = document.getElementById('banner').src

    } else {
      toggleSwitch.checked = false;
    }
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark'); //add this
    sessionStorage.setItem('textColor', 'black');
    sessionStorage.setItem('bgColor', 'red');
    document.getElementById('banner').src = document.getElementById('banner').src
  }
}
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  if (currentTheme === 'light') {
    toggleSwitch.checked = true;
  }
}
toggleSwitch.addEventListener('change', switchTheme, false);

当您更改主题时，横幅会自动刷新，所以这不是问题。它应该在网站加载时自动为红色背景和黑色文本，但当您更改主题时它应该会改变。

标签： javascripthtml

解决方案

I figured out how to fix it. I just set the default values in CSS and then alter it afterwards. Here's the code:

<!DOCTYPE html>
<html>

    <head>
<style>
    a:link{
    color: white;   
    }
    a:visited{
    color: white;   
    }

    .banner {
background-color: red;
color: black;
}



        </style>


    </head>
    <body>

            <div id="banner" class="banner" style="border:2px dotted orange; height:20px; width:100%; "><center>Check out our <a href="https://www.youtube.com/channel/UC4Eg3V26uXxWY-M639mGDrQ" target="_blank">Youtube</a> Channel! &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Help reinstate Net Neutrality! Visit <a href="https://www.battleforthenet.com/" target="_blank">https://www.battleforthenet.com/</a>!!<center></div>

            </body>   

            <script>
                function checkBanner() {
                    var textColor = sessionStorage.getItem('textColor');
                var backgroundColor = sessionStorage.getItem('bgColor');



    document.getElementById('banner').style.color = textColor;
        document.getElementById('banner').style.backgroundColor = backgroundColor; 

                }


                checkBanner();

            </script>
</html>

推荐阅读