我的sidenav颜色没有通过按钮更改（onclick）

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'但它没有任何改变...如果有人帮助我，我将不胜感激

Answer 1

使用console.log(g.style.background) ，您会看到g.style.background返回的rgb值不是您期望的十六进制值。 所以您的代码在这里失败：

  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') 。 创建类也比内联样式更好。 确保你给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() 。

Answer 3

问题是toggle_visibility函数内部的if语句

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

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

例如，如果您记录此

console.log(g.style.background);

您将看到以下字符串

rgb（245，245，245）无重复滚动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>

我的sidenav颜色没有通过按钮更改（onclick）

问题描述

3 个解决方案

解决方案1
0 2019-06-04 15:50:28

解决方案2
0 已采纳 2019-06-04 15:53:21

解决方案3
0 2019-06-04 15:56:43

我的sidenav颜色没有通过按钮更改（onclick）

问题描述

3 个解决方案

解决方案1 0 2019-06-04 15:50:28

解决方案2 0 已采纳 2019-06-04 15:53:21

解决方案3 0 2019-06-04 15:56:43

解决方案1
0 2019-06-04 15:50:28

解决方案2
0 已采纳 2019-06-04 15:53:21

解决方案3
0 2019-06-04 15:56:43