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返回一个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 个答案: