我的sidenav颜色没有随按钮改变（onclick）答案

【问题标题】：My sidenav color isn't changing with the button (onclick)我的sidenav颜色没有随按钮改变（onclick）
【发布时间】：2019-06-04 15:14:12
【问题描述】：

我创建了一个 JS 脚本，通过单击一个按钮来更改我的侧边菜单的背景，但它并没有改变任何内容

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

   function toggle_visibility() {
      var e = document.getElementById('on');
      if(e.style.display == 'none')
         e.style.display = 'block';
      else
         e.style.display = 'none';

       var f = document.getElementById('off');
       if(f.style.display =='block')
           f.style.display = 'none';
           else
           f.style.display = 'block';

      var g = document.getElementById('sidenav');
      if(g.style.background == '#F5F5F5') {
         g.style.background = '#252525';
      }
      if(g.style.background == '#252525') {
         g.style.background = '#F5F5F5';
      }
   }
</script>
</head>
<body id='body'>
   <div id="sidenav" style="background: #F5F5F5">
<div class="btn-area" onclick="toggleNav()">&#9776</div>

<ul>

      <div class="button">
            <button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
            </div>
</ul>

   </div>
</body>
</html>

我希望它将我的背景更改为id='sidenav'，但它并没有改变任何东西...... 如果有人帮助我，我将不胜感激呜呜

【问题讨论】：

这是您的代码的精简版吗？目前您没有定义 changeColor 或 backgroundHiding 函数，因此您只会在控制台中看到错误。
@Tom 是的，这是我的代码的精简版，我认为没有必要，但如果你愿意，我可以
你是想保持纯 JS 还是使用 jQuery？
我首先想到的是纯 JS，但我是编程新手，我真的不知道 jQuery @zachstarnes 是什么

标签： javascript html css button background

【解决方案1】：

因此，您可以通过对样式和 JS 稍作修改来完成此操作。只需使用g.classList.toggle('lights-on')。创建类也比内联样式更好。确保为sidenav 提供lights-on 的起始类。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

   function toggle_visibility() {
      var e = document.getElementById('on');
      if(e.style.display == 'none')
         e.style.display = 'block';
      else
         e.style.display = 'none';

       var f = document.getElementById('off');
       if(f.style.display =='block')
           f.style.display = 'none';
           else
           f.style.display = 'block';

      var g = document.getElementById('sidenav');
      g.classList.toggle('lights-off'); //<--- here is the toggle instead of your ifs
   }

</script>
</head>
<body id='body'>
   <div id="sidenav" class="lights-on"> <!-- make sure you add this class -->
<div class="btn-area" onclick="toggleNav()">&#9776</div>

<ul>

      <div class="button">
            <button onclick="changeColor(); backgroundHiding(); toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
            </div>
</ul>

   </div>
</body>
</html>

你的样式表应该是这样的：

.lights-on {
  background-color: #f5f5f5;
}

.lights-off {
  background-color: #252525;
}

作为旁注，我建议为您的方法使用一致的命名，因此 toggle_visibility() 应该是 toggleVisibility()。

【讨论】：

我刚决定使用你的方法，我写道： var g = document.getElementById('sidenav'); if (g.classList == ('lights-on')) g.classList.toggle('lights-off');否则 g.classList.toggle('lights-on'); console.log(g) 并且它似乎可以工作，但它不想更改为“熄灯”并且只是禁用 sidenav 的背景......
@AnimenoSekai 使用g.classList.toggle 时不需要if 语句，而且g.classList == ('lights-on') 将始终返回false，因为classList 是一个数组。如果你想检查一个类是否在classList 中，你需要使用if(g.classList.contains('lights-on')) 但是再次不需要检查toggle 将删除它，如果它不存在则添加它。

【解决方案2】：

问题在于 toggle_visibility 函数中的这个 if 语句

if(g.style.background == '#F5F5F5')

.background 不仅仅指颜色。它最多可以容纳八个单独的属性。

例如，如果您记录此内容

console.log(g.style.background);

你会看到下面的字符串

rgb(245, 245, 245) none 重复滚动 0% 0%

在控制台中。

这意味着if(g.style.background == '#F5F5F5') 的比较永远不会是真的。

此外，您可以从上面看到，它返回一个 rgb 值而不是十六进制数字，因此您需要先将颜色转换为十六进制。有一个方便的库可以完成这项工作w3color

这是完整的例子：

function toggle_visibility() {
  var e = document.getElementById('on');
  if (e.style.display == 'none')
    e.style.display = 'block';
  else
    e.style.display = 'none';

  var f = document.getElementById('off');
  if (f.style.display == 'block')
    f.style.display = 'none';
  else
    f.style.display = 'block';


  var g = document.getElementById('sidenav');

  if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#F5F5F5') {
    g.style.backgroundColor = '#252525';
  } else
  if (w3color(g.style.backgroundColor).toHexString().toUpperCase() == '#252525') {
    g.style.backgroundColor = '#F5F5F5';
  }
}

<script src="https://www.w3schools.com/lib/w3color.js"></script>
<div id="sidenav" style="background-color: #F5F5F5">
  <div class="btn-area" onclick="toggleNav()">&#9776</div>
  <ul>

    <div class="button">
      <button onclick="; toggle_visibility();" class="lightbutton">
               <span id="on">Turn Off the lights</span>
               <span id="off" style="display: none">Turn On the lights</span>
            </button>
    </div>
  </ul>
</div>

【讨论】：

【解决方案3】：

使用console.log(g.style.background)，您会看到 g.style.background 返回一个 rgb 值，而不是您期望的 HEX 值。所以你的代码在这里失败了：

  var g = document.getElementById('sidenav');
  if(g.style.background == '#F5F5F5') {
     g.style.background = '#252525';
  }
  if(g.style.background == '#252525') {
     g.style.background = '#F5F5F5';
  }

【讨论】：