Change web page background color javascript

Last updated on January 17th, 2016 at 09:22 am

Click to rate this tutorial!
[Total: 2 Average: 2.5]

Script to change webpage color from the server side are widely available, Even in this website we have 3 different versions of changing webpage background.

Change web page background color javascript

One using PHP
Change background color using php for a webpage
Other two using javascript
A single link that cycles through several webpage background color using javascript
Change webpage background color using javascript

But this script is slightly different, it asks a website user to select the webpage background color and font color they like.We are using document.body.style.color in javascript to change the font color in a webpage.

Here comes the fabulous script that changes webpage font color and also webpage background color by asking input from the user.Have a look

<script>
function change_me()
{
//mistonline.in code Please DONT EDIT THIS <thank you>
var color = document.getElementById('color').value
var font_color = document.getElementById('f_color').value
if(color == "" || font_color == "" )
{
alert("Please Enter Valid Color Codes or Names");
}
else
{
document.body.bgColor = color;
document.body.style.color = font_color;
}
}
</script>

The HTML code behind the script

 Type The Color To Be Changed: <input type="color" name="color" id="color" />  Font color  <input type="color" name="f_color" id="f_color" /><b><i><u>For eg: red, black, white, #ff0000, #00000 etc.,</u></i></b><br />
  <input type="button" value="Change Color" onclick="javascript:change_me()" />

Very easy to understand just using the basic DOM objects to get the data and update the webpage accordingly. Here is the DEMO

Click to rate this tutorial!
[Total: 2 Average: 2.5]

Leave a Reply

Your email address will not be published.