使用 javascript 更改背景颜色，使用相同的按钮没有 jquery 或其他

Question

function changeColor() { var bgcolor = document.getElementById("paper");

              if (bgcolor.style.backgroundColor = "white") {
                bgcolor.style.backgroundColor = "red";
              } else if (bgcolor.style.backgroundColor = "red")                 {   
                bgcolor.style.backgroundColor = "white";
              }
            }

Answer 1

您的代码中有一个明显的错误。

在 if 条件中，您正在使用 = 进行分配，而不是使用 === 检查是否相等

正确的应该是这样的：

function changeColor() { 
var bgcolor = document.getElementById("paper");
if (bgcolor.style.backgroundColor === "white") {
   bgcolor.style.backgroundColor = "red";
} else if (bgcolor.style.backgroundColor === "red"){   
   bgcolor.style.backgroundColor = "white";
}
  }

并回应您的评论。 您在 javascript 中检查的是内联 styles。 由于您没有任何内联 styles 开头......并且您的 css 中只有 styles 的条件 bgColor.style.backgroundColor === '将永远不会被添加。 因此 function 永远不会触发。

你可以做些什么来使它工作是在开始的内联样式添加背景颜色白色为纸 div 或检查计算样式，而不是像这样：

 function changeColor() { var bgcolor = document.getElementById("paper"); if (getComputedStyle(bgcolor).backgroundColor === "rgb(255, 255, 255)") { bgcolor.style.backgroundColor = "red"; } else if (getComputedStyle(bgcolor).backgroundColor === "rgb(255, 0, 0)"){ bgcolor.style.backgroundColor = "white"; } }

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); * { box-sizing:border-box; margin:0; padding:0; } body { background-color:#1e1e1e; padding:2em; font-family: 'Ubuntu', sans-serif; display:flex; justify-content:center; align-items:center; height:100vh; }.paper { width:50em; background-color:white; padding:1em; border-radius:8px; box-shadow: 5px 5px #888888; } h1 { padding:.5em; color:#242424; } p { padding:1em; color:#393939; } button { -moz-box-shadow: 0px 10px 14px -7px #AAAAAA; -webkit-box-shadow: 0px 10px 14px -7px #AAAAAA; box-shadow: 0px 10px 14px -7px #AAAAAA; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #AAAAAA), color-stop(1, #AAAAAA)); background:-moz-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%); background:-webkit-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%); background:-o-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%); background:-ms-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%); background:linear-gradient(to bottom, #AAAAAA 5%, #AAAAAA 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#AAAAAA',GradientType=0); background-color:#77b55a; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #4b8f29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:13px; font-weight:bold; padding:6px 12px; text-decoration:none; text-shadow:0px 1px 0px #5b8a3c; } button:hover, button.selected { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF851B), color-stop(1, #FF851B)); background:-moz-linear-gradient(top, #FF851B 5%, #FF851B 100%); background:-webkit-linear-gradient(top, #FF851B 5%, #FF851B 100%); background:-o-linear-gradient(top, #FF851B 5%, #FF851B 100%); background:-ms-linear-gradient(top, #FF851B 5%, #FF851B 100%); background:linear-gradient(to bottom, #FF851B 5%, #FF851B 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF851B', endColorstr='#FF851B',GradientType=0); background-color:#FF851B; } button:active { position:relative; top:1px; }

 <div class="paper" id="paper"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas alias accusamus id impedit architecto iure qui? Vel doloremque omnis nesciunt at atque expedita, molestias ratione quidem consequuntur voluptatum velit perspiciatis amet ut neque adipisci iure incidunt iusto. Libero laudantium possimus architecto commodi totam minus doloremque.</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corporis, pariatur odit laboriosam consequatur ex deserunt doloremque quae temporibus necessitatibus nam veritatis aspernatur ad eius possimus, quas distinctio alias nostrum rerum illo eos deleniti incidunt sequi dolores. Cumque, iusto earum.</p> <button type="button" onclick="changeColor()">Click me!</button> </div>