div element, when clicked, will fade (or transition) the page's background color

Question

To my surprise, I couldn't find an answer after quite a bit of searching. I'm using simple Javascript to help you see what I am trying to accomplish, but if this can be done using CSS, I'd be happy to try that out too. Also, please remember, I need this for colors, not images.

<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>

In essence, I want the click of a button to change the background slowly, like as in a fade or transition effect, but I've had a lot of difficulty the past two days.

Denys Séguret · Answer 1 · 2015-05-23T16:35:35.647

3

You can use CSS transitions for that.

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

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

<body class=A>

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

</body>

Note that I used a class. It's considered bad practice to mix style elements like colors in the javascript.

edited May 23 '15 at 16:35

answered May 23 '15 at 16:30

Denys Séguret

372,613
87
782
758

1

@EvanBechtol If you don't mean old versions of IE, then [yes](http://caniuse.com/#feat=css-transitions). – Denys Séguret May 23 '15 at 16:33
Can I ask, How do you get them code snippet things in your answer? – Dendromaniac May 23 '15 at 17:00
@Dendromaniac look at this: http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Denys Séguret May 23 '15 at 17:03
@dystroy Thanks, I've seen it around a lot and thought that I could be a little more useful If I were to use it. Can't believe its as simple as a little button, and I didn't know about it. – Dendromaniac May 23 '15 at 17:06

score 0 · Answer 2 · edited May 23 '17 at 12:06

Here is a purely CSS solution using the checkbox 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>

I modified Andy's answer from this post, basically just adding CSS animation to it: Can I have an onclick effect in CSS?

Essentially, all you are doing is using a checkbox as a toggle to trigger a class change.

score 0 · Answer 3 · answered May 23 '15 at 16:59

<!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>

Tested on JSFiddle

NOTE: Ummm.. It took me a while cause I thought it wasn't working, it was only I put 2000s instead of 2000ms. I know there are probably other answers now :(

div element, when clicked, will fade (or transition) the page's background color

3 Answers3