Javascript 我的sidenav颜色不是'；t使用按钮（onclick）进行更改_Javascript_Html_Css_Button_Background

Javascript 我的sidenav颜色不是'；t使用按钮（onclick）进行更改

javascript html css button

Javascript 我的sidenav颜色不是'；t使用按钮（onclick）进行更改,javascript,html,css,button,background,Javascript,Html,Css,Button,Background,我创建了一个JS脚本，通过单击一个按钮来更改我的侧菜单的背景，但它不会更改任何内容 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function toggle_visibility() { var e = document.getElementById('on'); if(e.style.display == 'none')

我创建了一个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>


函数切换_可见性（）{
var e=document.getElementById（'on'）；
如果（e.style.display==“无”）
e、 style.display='block'；
其他的
e、 style.display='none'；
var f=document.getElementById（'off'）；
如果（f.style.display=='block'）
f、 style.display='none'；
其他的
f、 style.display='block'；
var g=document.getElementById（'sidenav'）；
如果（g.style.background='#f5'）{
g、 style.background='#252525'；
}
如果（g.style.background='#252525'）{
g、 style.background='#f5'；
}
}
☰

关灯
开灯

我希望它能将我的背景更改为

id='sidenav'

，但它没有改变任何东西。。。如果有人帮助我，我将不胜感激 uwu

使用

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';
  }

因此，您可以通过对样式和JS进行一些修改来实现这一点。只需使用

g.classList.toggle（'lights-on'）

。创建类也比内联样式好。确保

sidenav

灯亮起

的起始类别
以下是完整的代码：
<!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>

作为一个附带说明，我建议您的方法使用一致的命名，因此toggle\u visibility（）
应该是toggleVisibility（）
如果在切换可见性函数中的语句，问题是
if(g.style.background == '#F5F5F5')

.background不仅仅指颜色。它最多可以容纳八个单独的属性
例如，如果您记录此
console.log(g.style.background);

您将看到以下字符串
rgb（245245245245）无重复滚动0%0%
在控制台中
这意味着如果（g.style.background='#f5'）

的比较永远不会为真

此外，从上面可以看到，它返回一个rgb值而不是十六进制数，因此需要首先将颜色转换为十六进制。有一个方便的图书馆来做这项工作

以下是完整的示例：

功能切换_可见性（）{
var e=document.getElementById（'on'）；
如果（e.style.display==“无”）
e、 style.display='block'；
其他的
e、 style.display='none'；
var f=document.getElementById（'off'）；
如果（f.style.display=='block'）
f、 style.display='none'；
其他的
f、 style.display='block'；
var g=document.getElementById（'sidenav'）；
if（w3color（g.style.backgroundColor）.toHexString（）.toUpperCase（）=='#f5'）{
g、 style.backgroundColor='#252525'；
}否则
if（w3color（g.style.backgroundColor）.toHexString（）.toUpperCase（）=='#252525'）{
g、 style.backgroundColor='#f5'；
}
}


☰

关灯
开灯

这是您的代码的精简版本吗？现在你还没有定义changeColor或backgroundHiding函数，所以你只能在控制台中看到错误。@Tom是的，这是我代码的精简版本，我认为这是不必要的，但是如果你想让它保持纯JS，或者你能用jQuery吗？我首先想到纯JS，但是我是编程新手，我真的不知道jQuery@zachstarnesI是什么，我刚刚决定使用你的方法，我写了：var g=document.getElementById（'sidenav'）；if（g.classList==（'lights-on'））g.classList.toggle（'lights-off'）；else g.classList.toggle（'lights-on'）；console.log（g），它似乎可以工作，但它不想更改为“lights off”，只想禁用sidenav的背景…@AnimenoSekai在使用

g.classList.toggle时不需要if
语句

将始终返回false，因为

classList

是一个数组。如果要检查类是否在

类列表

中，则需要使用

if（g.classList.contains（'lights-on'））

，但无需再次检查

toggle

将删除该类，如果不在，则添加该类。

console.log(g.style.background);