Question

令我惊讶的是，经过相当多的搜索，我找不到答案。我正在使用简单的Javascript来帮助您了解我想要完成的任务，但如果可以使用CSS完成，我也很乐意尝试一下。另外，请记住，我需要这个颜色，而不是图像。

<head>
<link rel="stylesheet" type="text/css" href="bground.css">
</head>

<body>

<div id='a' class="circle" onclick="myFunction()"> <br> <br> Click me for blue. </div>
<br>

<script>
function myFunction() {
    document.body.style.backgroundColor="blue";}
</script>

</body>

本质上，我希望点击一个按钮可以缓慢地改变背景，就像淡入淡出或过渡效果一样，但过去两天我遇到了很多困难。

Answer 1

您可以使用CSS过渡。

＆＃13;

function myFunction() {
    document.body.className="B";
}

＆＃13;

body {
  background: red;
}
body.B {
  background: blue;
  transition: background 4s;
}

＆＃13;

<body class=A>

<div id='a' class="circle" onclick="myFunction()"> <br> <br> Click me for blue. </div>
<br>

</body>

＆＃13;

请注意，我使用了一个班级。在javascript中混合颜色等样式元素被认为是不好的做法。

Answer 2

这是一个纯粹的CSS解决方案，使用复选框hack。

Plunker

CSS：

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}
input[type=checkbox] ~div {
   -webkit-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
}
/* Toggled State */

input[type=checkbox]:checked ~ div {
   background: red;
   -webkit-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
}

HTML：

<label for="toggle-1">I'm a toggle</label>
<input type="checkbox" id="toggle-1">
<div>I'm controlled by toggle. No JavaScript!</div>

我在这篇文章中修改了Andy的答案，基本上只是添加了CSS动画：Can I have an onclick effect in CSS?

基本上，您所做的就是使用复选框作为切换来触发类更改。

Answer 3

<!DOCTYPE html>
<html lang="en-GB>
<head>
  <script>
    document.getElementById( 'btn' ).onclick = function() {
      document.body.style.background = 'pink';
    }
  </script>

  <style>
    body {
      background: red;
      transition: background 1s;
    }
  </style>
</head>
<body>
  <div id="btn">Click Me!</div>
</body>
</html>

在JSFiddle

上进行测试

注意：嗯..我花了一段时间因为我认为它不起作用，只是我放2000s而不是2000ms。我知道现在可能还有其他答案:(

div元素在单击时将淡化（或转换）页面的背景颜色

3 个答案: