javascript - 如何在JavaScript中更改背景颜色？-6ren

javascript - 如何在JavaScript中更改背景颜色？

转载作者：行者123 更新时间：2023-12-04 00:53:33

每次单击按钮时，我都试图更改包装器的背景颜色。单击它时，应该将其更改为数组中的随机颜色。对初学者有什么想法吗？ CSS也是用SASS完成的，因此看起来可能不太漂亮。

function change_Color() {
  var color = ["blue", "red", "green", "yellow"];
  document.getElementById("wrapper").style.backgroundColor = color;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  height: 100vh;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    padding: 10px;
    background: orange;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 2rem;
    transition: .5s ease;
    &:hover {
      box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
    &:focus {
      outline: 0;
      color: skyblue;
    }
  }
}

<div id="wrapper">
  <button onclick="change_Color()">Click me!</button>
</div>

最佳答案

检查这个。我在CSS中合并了主体和包装器，并为主体指定了ID

var colors = ["red", "blue", "green", "yellow"];
    function changeColor() {
        document.getElementById("body").style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];}

#body {
margin: 0;
box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
 button {
    padding: 10px;
    background: orange;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 2rem;
    transition: .5s ease;
    &:hover {
      box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
    &:focus {
      outline: 0;
      color: skyblue;
    }
  }

<body id='body'>
    <button onclick="changeColor();">Click me!</button>
    </body>

关于javascript - 如何在JavaScript中更改背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62143561/

文章推荐： QTableView selectionChanged

文章推荐： python - 计算 GeoPandas 中两个 GeoDataFrame(点)之间的所有距离

文章推荐： c# - 如何停止自动使用 Tag Helper？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在JavaScript中更改背景颜色？