Last updated on January 17th, 2016 at 09:22 am
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