Question

我正在尝试创建一个按钮来更改HTMl页面的背景颜色。以下是我拥有的代码，但是我拥有的代码似乎不起作用，有人可以帮助我吗？

var colors = ["red", "blue", "green"];
var colorIndex = 0;
function changeColor() {
    var col = 
document.getElementById("body");
    if( colorIndex >= colors.length ) {
        colorIndex = 0;
    }
    col.style.backgroundColor = 
colors[colorIndex];
    colorIndex++;
}

/* This is to Style My Button */
.button {
  position: center;
  background-color: #c2c3c4;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* 
  Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

<html>
<head></head>
<body>
<button class="button" onclick="changeColor();">Change Colour</button>
</body>
</html>

这是我对代码的最后尝试，它不起作用，但是确实给了我希望的按钮样式，任何添加或解决的问题都将不胜感激。

Answer 1

您只需使用来呼叫您的身体

document.getElementsByTagName("body")[0]

var colors = ["red", "blue", "green"];
      var colorIndex = 0;
      function changeColor() {
          var col = document.getElementsByTagName("body")[0];
          if( colorIndex >= colors.length ) {
              colorIndex = 0;
          }
          col.style.backgroundColor = colors[colorIndex];
          colorIndex++;
      }

/* This is to Style My Button */
.button {
position: center;
background-color: #c2c3c4;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /*
Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}

<button class="button" onclick="changeColor();">Change Colour</button>

Answer 2

或者，如果您希望颜色是完全随机的，而不是仅仅从索引中挑选颜色，您可以这样做：

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

let button = document.querySelector('button')
button.addEventListener('click', () => {
  let r = randomInt(1, 255),
    g = randomInt(1, 255),
    b = randomInt(1, 255)
  document.body.style.background = `rgb(${r}, ${g}, ${b})`
})

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<button>Change Color!</button>

使用randomInt函数，它返回介于min和max之间的一个随机整数，包括min和max，我们可以得到一个介于1到255之间的随机值。单击按钮后，我们将调用该函数三次，并将每个值存储在其中代表红色，绿色和蓝色的变量。然后，使用模板文字将这些值放入人体背景。每当按下按钮时，都会为主体分配一个不同的rgb值。

Answer 3

您好，问题是因为主体不是ID，而是HTML标记，您可以直接通过“ document.body”或使用“ document.getElementsByTagName（'body'）[0]”来访问它（此返回一个元素数组，在这种情况下，我们需要访问第一个元素。

我与您分享功能代码。

var colors = ["red", "blue", "green"];
var colorIndex = 0;
function changeColor() {
    var col = document.body;
    //var col = document.getElementsByTagName ('body')[0];

    if( colorIndex >= colors.length ) {
        colorIndex = 0;
    }
    col.style.backgroundColor = 
colors[colorIndex];
    colorIndex++;
}

/* This is to Style My Button */
.button {
  position: center;
  background-color: #c2c3c4;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* 
  Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

<html>
<head></head>
<body>
<button class="button" onclick="changeColor();">Change Colour</button>
</body>
</html>

Answer 4

这个。

var colors = ["red", "blue", "green"];
var i=0;
function changeColor(){
  if(i<colors.length-1){
    i=i+1; 
  }
  else{
    i=0;
  }
  $('body').css('background-color', colors[i]);  
}

.button {
  position: center;
  background-color: #c2c3c4;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* 
  Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" onclick="changeColor();">Change Colour</button>

尝试创建一个更改背景颜色的按钮

4 个答案: