Question

我创建了一个线性渐变并用javascript对其进行了动画处理，并将其设置为我的网站的背景。然后，我在HTML中添加了一个按钮，当单击渐变颜色时，该按钮会熄灭。

现在，我试图使按钮也更改页面上模态的backgroundColor，但似乎无法弄清楚。谁能帮我看看我哪里出了问题？我认为我只是针对模态div上的.modal类存在问题。

当我尝试添加功能以更改模式背景时，我将首先放置残破的javascript。然后，我将放置没有损坏的html，css和javascript（无需代码即可更改模式背景。

JavaScript损坏

var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000", modalz = "rgba(0, 0, 0, 0.6)";

var changeBackground = function() {
  angle = angle + .3
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('li').forEach(li => li.style.color = font);
}

var changeShadow = function() {
  document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}

var changeModal = function() {
  document.body.style.modal.backgroundColor = "rgba(0, 0, 0, 0.6)";
}

changeBackground()
changeFont()
changeShadow();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
  colors = (colors != "#000") ? "#000" : "#759ef3";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
  shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
  modalz = (modalz != "rgba(0, 0, 0, 0.6)") ? "rgba(0, 0, 0, 0.6)" : "rgba(240, 240, 240, 1)";
  changeFont()
  changeModal()
  changeShadow();
})

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jacob Truax Portfolio</title>
  <script src="main.js"></script>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="fonts.css">
  <script src="jquery.js"></script>
</head>

<body>

  <!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p> This is a test </p>
  </div>

</div>

<!-- Button triggering color change -->
  <div id="myBtn" class="Btn">
  <button></button>
  </div>

<!-- main content -->
<div class="main">
  <ul>
    <li id="hover1-1" class="fnup">fn-up</li>
    <li id="hover1-2" class="about">about</li>
    <li id="hover1-3" class="issue">issue 0</li>
    <li id="hover1-4" class="contact">contact</li>
  </ul>
</div>

Css

/* The Modal (background) */
.modal {
    color: #fff;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    padding-bottom: 20px;
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    margin: auto;
    text-align: center;
    padding: 20px;
    width: 80%;
    font-size: 3vw;
    line-height: 6.4vh;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    display: none;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/* End modal ============ */


body {
  background-color: #d22c1f;
  font-family:"Brrr", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 700;
  font-size: 12vw;
  overflow: hidden;


  perspective: 1500px;
  height: 100vh;
  width: 100vw;
}

@media only screen and (min-width: 1600px) {
    body {
        font-size: 210px
    }
}

/* a {
  opacity: 0;
  color: rgba(102, 102, 102, 0);
  text-decoration: none;
  display: inline-block;
} */

/* the main contet is in 3d space and rotates slightly with the cursor */
.main {
  position: relative;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(0deg) rotateY(0deg);
}

li {
  text-shadow: 4px 4px 40px #000;
  color: rgba(102, 102, 102, .3);
  padding-left: 60px;
  top: -10px;
  display: inline-block;
}

div.Btn {
  position: fixed;
  line-height:0;
  font-size: 0px;
  right: 3vw;
  bottom: 3vh;
  width: 36px;
  height: 36px;
  background-image:  url(lib/frown.svg);
  opacity: 0.3;
  mix-blend-mode: overlay;
  z-index: 2;
}

div.Btn:hover {
  background-image:  url(lib/smile.svg);
  opacity: 0.3;
  mix-blend-mode: overlay;
}

button {
  width: 36px;
  height: 36px;
  border: none;
  outline:none;
  background: transparent;
  border: none !important;
  cursor: pointer;
  font-size:0;
}

JavaScript（未损坏）

var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";

var changeBackground = function() {
  angle = angle + .3
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('li').forEach(li => li.style.color = font);
}

var changeShadow = function() {
  document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}


changeBackground()
changeFont()
changeShadow();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
  colors = (colors != "#000") ? "#000" : "#759ef3";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
  shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
  changeFont()
  changeShadow();
})

Answer 1

您可以试试看。给您的模态一个ID。假设您给它elem。

var elem = document.getElementById("elem");
elem.style.backgroundColor = "rgba(0, 0, 0, 0.6)";

问题一定是这种语法

document.body.style.modal.backgroundColor= "blue";

Answer 2

我可能缺少明显的东西，但是据我所知，document.body.style.modal没有返回任何东西。您应该使用modal类访问元素，然后分配颜色。 document.querySelector('.modal').style.backgroundColor = "blue";

使用Javascript单击按钮时更改模态backgroundColor

2 个答案: