Change html background color using css javascriptThese 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.infolet.org </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:

change background color html javasript
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.infolet.org </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:

textbox button control change background color html javasript

You can use HTML color codes instead of colors' name

textbox button colorcode control change background color javasript

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.infolet.org </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:

listbox select option control change background color javasript

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.infolet.org </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:

input box change background color html javasript

You can also change color using radio buttons, checkboxes, combo boxes etc.

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.infolet.org </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:

gradient more change background color html javasript

Enjoy with these codes…

More JavaScript codes are here




No comments:

Post a Comment