By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,462 Members | 1,057 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,462 IT Pros & Developers. It's quick & easy.

javascript button to toggle document background colour

P: 18
hi all,
i need to create a button with javascript, that when i click on it, it will change the background color from white to black and backwards. I mean, every time i hit it, change the colo between white and black. Can you please show me the javascript for that?
Nov 17 '11 #1
Share this Question
Share on Google+
11 Replies


Rabbit
Expert Mod 10K+
P: 12,430
What do you have so far?
Nov 17 '11 #2

P: 18
i have code to change between 2 background colors onclick. It is the background
color of the body of the webpage i want to change.
the code is this:

Expand|Select|Wrap|Line Numbers
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.getElementById().style.backgroundColor;
  6.  
  7.                         if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
  8.             {
  9.                 document.getElementById().style.backgroundColor = '#000000';
  10.             }
  11.             else
  12.             {
  13.                 document.getElementById().style.backgroundColor = '#e2e2e2';
  14.             }
  15.         }
Nov 17 '11 #3

P: 18
Actually, the whole project is like this: I want to have a button(or whatever object in a web page, it's not important right now) that when i click on it, it will change both the header's bg image and the body's background color and also work backwards.



code so far:

Change body bg color:

Expand|Select|Wrap|Line Numbers
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.getElementById("body").style.backgroundColor;
  6.             if(backColor.toLowerCase("body")=='#e2e2e2' || backColor.toLowerCase("body")=='rgb(227, 227, 227)')
  7.             {
  8.                 document.getElementById("body").style.backgroundColor = '#000000';
  9.             }
  10.             else
  11.             {
  12.                 document.getElementById("body").style.backgroundColor = '#e2e2e2';
  13.             }
  14.         }
  15.  
Change header image(this one changes image once, but i want to to work backwards too)

Expand|Select|Wrap|Line Numbers
  1.     function changeHeaderImage()
  2.     {
  3.         var imgPath = new String();
  4.         imgPath = document.getElementById("header").style.backgroundImage;
  5.  
  6.         if(imgPath == "url(images/header_bg.jpg)" || imgPath == "")
  7.         {
  8.             document.getElementById("header").style.backgroundImage = "url(images/header_black.jpg)";
  9.         }
  10.         else
  11.         {
  12.             document.getElementById("header").style.backgroundImage = "url(images/header_bg.jpg)";
  13.         }
  14.     }
  15.  
thanks for your help.
Nov 17 '11 #4

Rabbit
Expert Mod 10K+
P: 12,430
So basically you just want to call both functions? Why not do just that?
Nov 17 '11 #5

P: 18
Because they don't work. Until now, i only succeded in changing the header's bg image and it doesn't work backwards.
Nov 17 '11 #6

Rabbit
Expert Mod 10K+
P: 12,430
Well, first off, if you're trying to change the background color of the body, you use document.bgColor. As for the background image, I have no problem running that code. Other than your extraneous space between background and Image, it worked fine. But I assume that's a transposition error, otherwise it wouldn't run even the first time.
Nov 17 '11 #7

P: 18
What i meant saying backwards, is that i want to change the image (or color) every time i click on the button, not just twice. Sorry my english is not that good.
Nov 17 '11 #8

Rabbit
Expert Mod 10K+
P: 12,430
I know what you mean. It works for me.
Nov 17 '11 #9

P: 18
It didn't work for me for some reason, so i used a script that changes css class and it worked. I have this code above to change (toggle is the word i was looking for) the document bg color, but i can't get it to work.


Expand|Select|Wrap|Line Numbers
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.backgroundColor;
  6.             if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
  7.             {
  8.                 document.backgroundColor = '#0f0f0f';
  9.             }
  10.             else
  11.             {
  12.                 document.backgroundColor = '#e2e2e2';
  13.             }
  14.         }
Nov 18 '11 #10

P: 18
I changed the previous script to this


Expand|Select|Wrap|Line Numbers
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.             backColor = document.body.style.backgroundColor;
  5.             if(backColor.toLowerCase()=='#0f0f0f' || backColor.toLowerCase()=='rgb(15, 15, 15)')
  6.             {
  7.                 document.body.style.backgroundColor = '#ffffff';
  8.             }
  9.             else
  10.             {
  11.                 document.body.style.backgroundColor = '#0f0f0f';
  12.             }
  13.         }
it worked. thanks
Nov 18 '11 #11

omerbutt
100+
P: 638
hi , a better approach is to use css selectors / classes to assign different color schemes and then you can switch between them using javascript


To add a class to an element:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("MyElement").className += " MyClass";
  2.  
To remove a class from an element:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("MyElement").className = 
  2.    document.getElementById("MyElement").className.replace
  3.       ( /(?:^|\s)MyClass(?!\S)/ , '' )
  4. /* code wrapped for readability - above is all one statement */
  5.  
To do that in an onclick event:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     function changeClass()
  3.     {
  4.         // code examples from above
  5.     }
  6. </script>
  7. ...
  8. <button onclick="changeClass()">My Button</button>
  9.  
Better yet, use a framework (in this example jQuery) which allows you to do the following:
Expand|Select|Wrap|Line Numbers
  1. $j('#MyElement').addClass('MyClass');
  2.  
  3. $j('#MyElement').removeClass('MyClass');
  4.  
  5. $j('#MyElement').toggleClass('MyClass');
  6.  
And also:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     function changeClass()
  3.     {
  4.         // code examples from above
  5.     }
  6.  
  7.     $j(':button:contains(My Button)').click(changeClass);
  8. </script>
  9. ...
  10. <button>My Button</button>
  11.  
regards
Omer Aslam
Nov 27 '11 #12

Post your reply

Sign in to post your reply or Sign up for a free account.