问为什么不换成不同的颜色呢？
EN

Stack Overflow用户

提问于 2019-09-10 05:09:26

回答 1查看 80关注 0票数 0

我遇到了一个问题，我无法让我的横幅从存储在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);

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

javascript

html

回答 1

Stack Overflow用户

发布于 2019-09-11 04:22:36

我想出了怎么修好它。我只是在CSS中设置了默认值，然后再修改它。代码如下：

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57861223

复制

相似问题

问为什么不换成不同的颜色呢？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么不换成不同的颜色呢？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么不换成不同的颜色呢？
EN