我的 sidenav 颜色没有随着按钮（点击）而改变

Question

我创建了一个 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'，但它并没有改变任何东西... 如果有人帮助我，我将不胜感激 uwu

Answer 1

使用console.log(g.style.background)，您会看到g.style.background returns 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';
  }

Answer 2

所以你可以通过稍微修改你的样式和 JS 来完成这个。只需使用 g.classList.toggle('lights-on')。创建 classes 也优于内联样式。确保给 sidenav lights-on 的起始 class。

完整代码如下：

<!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().

Answer 3

问题是 toggle_visibility 函数中的 if-statement

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

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

例如，如果你记录这个

console.log(g.style.background);

您将看到以下字符串

rgb(245, 245, 245) none repeat scroll 0% 0%

在控制台中。

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

此外，正如您从上面看到的那样，它 returns 是一个 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>

我的 sidenav 颜色没有随着按钮（点击）而改变

My sidenav color isn't changing with the button (onclick)

html

javascript

css

background

button