Change webpage background color using javascript
Change webpage background color using javascript
Hello guys, i am back again with yet another simple but interesting tutorial of changing webpage background color using javascript, just copy and paste it to your webpage and customize it according to your webpage design.
<script language="javascript">
function chngebg (id)
{
switch (id)
{
case 'b1':
document.body.bgColor = "red";
break;
case 'b2':
document.body.bgColor = "blue";
break;
case 'b3':
document.body.bgColor = "black";
break;
case 'b4':
document.body.bgColor = "yellow";
break;
}
}
</script>
<body>
<input type="button" id="b1" onclick="chngebg(this.id)" value="Red"/>
<input type="button" id="b2" onclick="chngebg(this.id)" value="Blue"/>
<input type="button" id="b3" onclick="chngebg(this.id)" value="Black"/>
<input type="button" id="b4" onclick="chngebg(this.id)" value="Yellow"/>
</body>
Change webpage background color using javascript, Incoming search terms:
- use jquery to change document background color dynamically (36)
- Change background color using JavaScript (21)
- how to change background color using javascript (17)
- changing bgcolor javascript using alert (15)
- change bgcolor using javascript (13)
- Changing the Background Color of a Page using jQuery (12)
- how to change background color in javascript with one button (11)
- simple program using button change background color using javascript (5)
- javascript change background (3)
- Design a webpage using HTML and 5 Javascript in which the background colour of the page changes on the click of the button (3)
- javascript color (2)
- dhtml code to change the background color of webpage (1)
- free java script for change color contrast of the webpage (1)
- get button background color using javascript (1)
- how can i change colour by using html and JavaScript (1)
- how do i change background color in javascript depends on browser (1)
- How to button through change background colour change in using html and java script (1)
- how to change autometical bgcolor in html form javascript (1)
- how to change backgroun color ofHTML WEBPAGE (1)
- how to change background color automatic in html in javascript (1)
- how to change background color automatically in javascript using html (1)
- how to change background color of a page using javascript (1)
- How to change the background colour of a webpage using javascript drop down box (1)
- how to change the color of menu while clicking using javascript (1)
- who to change wab page color on button click through js (1)
- Design a webpage using HTML and 5 Javascript in which the background colour of the page changes on the (1)
- change backgrond color of webpage using jquery (1)
- change background and text color using button in javascript (1)
- change background color of page by a clicking a button using javascript (1)
- Change Background Color webpage script (1)
- change background colour in jsp using dropdown list (1)
- change color based on video background color with jquery (1)
- change color of web page in java (1)
- change my bgcolor based on timer javascript (1)
- change the background of three buttons using java script (1)
- change the page background using html by clicking (1)
- change web page from javascript (1)
- change webpage background color with the help of dropdown in javascript (1)
- changing background webpage to black (1)
- changing the background of web page according to the user using dhtml (1)
Hi, my friend showed me that you can use javascript to change things in your browser by doing stuff like javascript:”Hi” and that, but I forgot how to change the background color, not of your website, but turn your browser window into a solid color. Help, please?
You cannot change your browser color as far as i know, you can just change your web-page background.
hii…. this tutoorial is not working on google crome… plz help me out
It should work. Can you please let me know which version of google chrome you are using.
I tried to copy this code in, but it didnt work. Thought it might have been due to css attachment so got rid of that but still not working, any suggestions?
Hello Alan,
Thanks for your comment, Please check now, I have made the code much easier for copy paste.[Previously some extra character was popping up while copying and that might prevented the code from working, fixed it]
Please let me know if you have any issues.
Nice information. I like it. Thank
Hello, I find your article useful… However I also need to change the font color along with the background color & also I wonder if you can change the bg color for other div within the same page as well… Is there a way to do that? Thanks. 🙂
Hello,
Thanks for your comment.
Yes you can do that by using this attribute document.getElementById(‘YOUR DIV NAME’).style.backgroundColor = “YOUR COLOR”
Thank you for this tutorial.
How would this be done by having only one link that cycles through several background colours?
Thanks!
Takashi
Just check our new tutorial
http://mistonline.in/wp/a-single-link-that-cycles-through-several-webpage-background-color-using-javascript/
I think it will solve your concern.
i have done web development long ago, but now have a friend who is color blind, and i am wondering if there is any way to change colors/text from the user side
thankx
Hello Frank,
If that is the case check our New Tutorial Here, It will ask the users which color they need on the website. This should help 🙂