javascript - 通过 javascript 更改正文颜色（覆盖）不起作用

问题描述

试图获得侧边栏导航。这是代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      font-family: "Lato", sans-serif;
      transition: background-color .5s;
    }
    
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .sidenav a:hover {
      color: #f1f1f1;
    }
    
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    #main {
      transition: margin-left .5s;
      padding: 16px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
    
    <div id="main">
      <h2>Sidenav Push Example</h2>
      <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    </div>
    
    <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.body.style.backgroundColor = "white";
    }
    </script>
       
    </body>
    </html>

它工作得很好。侧边栏出现。但是身体背景颜色变化出了点问题（脚本如下）。

document.body.style.backgroundColor = "rgba(0,0,0,0.4)";

脚本似乎工作。我可以更改 style.width 元素，结果在页面上。

我尝试了什么：

给 body 一个背景颜色。正常状态正文背景颜色未定义。
将脚本直接放在 .html 文件中
将脚本放在外部
给 body 一个名为“body”的 ID，并用这个 -> document.getElementById("body").style.backgroundColor = "red";

控制台没有错误。有人可以帮忙吗？

谢谢！

标签： javascript

javascript - 通过 javascript 更改正文颜色（覆盖）不起作用

问题描述

解决方案

推荐阅读