Question

我们说我有以下HTML代码：

<html>
  <body>
    <button id="one">Button 1</button>
    <button id="two">Button 2</button>
    <button id="reset">Reset</button>
  </body>
</html>

如何使按钮将背景颜色从白色更改为绿色或从白色更改为红色，单击重置时是否将背景颜色更改为白色？

Answer 1

不知道你想要什么重置按钮，但这里有一个jQuery脚本可以完成这项工作：

＆＃13;

$("#one").click(function() {
  $("body").css("background-color", "green");
});

$("#two").click(function() {
  $("body").css("background-color", "red");
});

$("#reset").click(function() {
  $("body").css("background-color", "white");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">Button 1</button>
<button id="two">Button 2</button>
<button id="reset">Reset</button>

＆＃13;

你无法用纯CSS做你想做的事情

这是一个工作小提琴：

https://jsfiddle.net/u66yann6/16/

Answer 2

只有CSS方式，但我不建议使用它。你需要有一个占用整个身体并包含所有内容的div，并有单选按钮来存储当前状态。

＆＃13;

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
}

[name=color] {
  display: none;
}

#green[name=color]:checked~.background {
  background: green;
}

#red[name=color]:checked~.background {
  background: red;
}

#white[name=color]:checked~.background {
  background: white;
}

.background {
  height: 100%;
  width: 100%
}

.button {
  background-color: buttonface;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
}

.button:active {
  border-style: inset
}

＆＃13;

<input type="radio" name="color" id="green">
<input type="radio" name="color" id="red">
<input type="radio" name="color" id="white">

<div class="background">
  <label class="button" for="green">Green</label>
  <label class="button" for="red">Red</label>
  <label class="button" for="white">White</label>
</div>

＆＃13;

这只是一个基本的实现，使其可行，你必须加入一些咏叹调的东西，以使其符合A11y。

Answer 3

<button data-color="blue">Button 1</button>
<button data-color="red">Button 2</button>
<button data-color="white">Reset</button>

...


$('[data-color]').click(function(){
    var color = $(this).data('color');
    $('body').css('background-color',color);
});

最终

jsfiddle.net/u66yann6/17

按钮更改背景

3 个答案: