How to make a button that can change background color of a doucment?


Tags: javascript,html,css

Problem :

I would like to make a button that when it's clicked ,the background color of my webpage changes. I have tried already with Javascript & Css but no success! Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
        <style>
        .bgcolor1{
            background-color:black;
        }
        .bgcolor2{
            background-color:grey;
        }
        </style>
        <script type="text/javascript">

        </script>
    </head>
    <body class="bgcolor1">
        <button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
    </body>
</html>

As you can see when the user click on the button it should change the class to "bgcolor2" so the background color would be grey but it just changes the background color of the button to grey & not the document! So how can I change the background color of document with css or js or what's the problem with this code? thx ...



Solution :

<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>

this refers to the button and not the body. document.body.className = 'bgcolor2';


    CSS Howto..

    How to position two elements side by side?

    How to make the CSS Dropdown same size as it's parent

    How to set focus int o next tab using tab key?

    CSS question how to make one div appear over another?

    How to Extract one images from bunch of image(Image Pack)?

    How to exclude specific the form from the css applied to body [duplicate]

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    How to match the last n children with CSS?

    How to make three DIV align vertical if not enough space horizontal

    How do I vertical center text next to an image in html/css?

    How to remove CSS spaghetti in legacy web app?

    Asp.Net how to apply a css style to all the control of it's kind

    Rails 3: jquery working to switch view with AJAX, how to get an focused state for the link?

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How can I apply CSS to an HTML text input?

    how to make website more user friendly for mobile users [closed]

    how to remove elements in document fragment after append

    How to wrap lines in an inline-block with CSS?

    How to center horizontally a div within an li in CSS

    How to hide a
    item with CSS?

    How can I change the color of this text?

    How can a

    How to Align CSS form

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    How can I show a DIV when hovering on a DIV using pure CSS?

    Show Limited Data Using jquery

    How do I reference this textarea and checkbox?

    How to set specific css value for javaFX ProgressBar during Runtime?

    How to force space inbetween a css table (responsive webpage)

    How to pre-load images only using CSS (no JS)?