Last updated on November 23rd, 2022 at 01:34 pm
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.
But this script is slightly different, it prompts 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.
Let us define a function in javascript which check the color code.
function change_me()
{
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;
}
}
The HTML code to call the above Javascript function, once you click the button it will change the background and font color of the webpage.
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()" />
In the HTML code we are using type as color inside the input tag. This will pop up the color picker.
Here is the DEMO
Check out our other scripts
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
admin