Post Abstraction: User Defined Background Color and gradient color using Text box, List Item and Button in HTML using CSS
These are simple and funny JavaScript codes. Using these codes you can change the background color of your web page.
Usually the background color of a webpage is static; it is set by web site owner or web designer. But we can allow users to select own background color for your webpage. So users can visit your site with their own famous color.
Normal and default method to set background color in a HTML page:
<html>
<title> Background Colors </title>
<body bgcolor = "red">
<h1> www.yourowncodes.com </h1>
</body>
<title> Background Colors </title>
<body onload = "changecolor()">
<h1> www.infolet.org </h1>
</body>
<script type = "text/javascript">
function changecolor()
{
document.bgColor = "red";
}
</script>
</html>
Here background color is red. You can choose any color instead of ‘red’.
If you allow users to select the background color of your webpage, then we have to select one of the following controls.
Output:
Table of Contents
Using Text box:
Here a text box will be there. User will type a valid name of a color or html color code. Then user can change the background color by a simple button click.
Here is the code:
<html>
<title> Background Colors </title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name="myform">
<input type="text" name="colorname">
<input type = "button" value = "Change color" onclick = "changecolor()">
</form>
</body>
<script type = "text/javascript">
function changecolor()
{
var clr = document.myform.colorname.value;
document.bgColor = clr;
}
</script>
</html>
Sample Output:
You can use HTML color codes instead of colors’ name
Using List box
Here a list box contains many colors, if user select a color, then background color will change to that color.
Let’s see the colors of rainbow, VIBGYOR
Here is the code:
<html>
<title> Background Colors</title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name="myform">
<select name = "list" size="10" onclick="changecolor()" >
<option value = "violet"> Violet </option>
<option value = "indigo"> Indigo </option>
<option value = "blue"> Blue </option>
<option value = "green"> Green </option>
<option value = "indigo"> Indigo </option>
<option value = "yellow"> Yellow </option>
<option value = "orange"> Orange </option>
<option value = "red"> Red </option>
</select>
</form>
</body>
<script type="text/javascript">
function changecolor()
{var clr = document.myform.list.value;
document.bgColor=clr;
}
</script>
</html>
Sample Output:
Using Input box
Input box is small box like message box; where users can type the name of color or html color codes that he want to set the background color. When he clicks on “OK”, then typed color will set as the background color.
Here is the code:
<html>
<title> Background Colors</title>
<body>
<h1> <b> www.yourowncodes.com </b> </h1>
<form name = "myform">
<input type = "button" value="Click to change color" onclick="changecolor()">
</form>
</body>
<script type="text/javascript">
function changecolor()
{
var clr = prompt("Enter the color","");
document.bgColor = clr;
}
</script>
</html>
Sample Output:
You can also change color using radio buttons, checkboxes, combo boxes etc.
Gradient Color
If you want to set two colors as gradient, then you have to add two text boxes to type two colors.
Here is the code:
<html>
<title> Background Colors</title>
<body id = "une">
<h1> <b> www.yourowncodes.com </b> </h1>
<form name = "myform">
<input type = "text" name="colorname">
<input type = "text" name="colorname2">
<input type = "button" value = "Change color" onclick="changecolor2()">
</form>
</body>
<script type="text/javascript">
function changecolor2()
{
var clr = document.myform.colorname.value;var clr2 = document.myform.colorname2.value;
var temp = document.getElementById("une");
var changeclr = "linear, 20 50, 50 10, color-stop(0, " + clr + "), color-stop(100, " + clr2 + ")";
temp.style.backgroundImage = "-webkit-gradient(" + changeclr + ")";
}
</script>
</html>
Sample Output:
Enjoy with these codes…
Be First to Comment