HTML | DOM Input Color value Property
The DOM Input Color value Property in HTML DOM is used to set or return the value of the value attribute of a color picker.
The value attribute is used to specify the color for the color picker. It’s default value is #000000 (black color). Syntax
- It returns the value property.
colorObject.value
- It is used to set the value property.
colorObject.value = #hexvalue
Property Values: It contains a value i.e #hexvalue which specifies the color for the color picker.
The value should be a hexadecimal : 3 double digit number start from # sign . For eg-Hex value of a black color is #000000.
Return Value: It returns a string value which represents the color for the colorpicker.
Example-1: This Example illustrates how to return the Property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Color value Property </ title > </ head > < body style="text-align:center;"> < h1 > w3wiki </ h1 > < h2 > HTML DOM Input Color value Property </ h2 > < p > Select your favorite color: < input type = "color" value = "#009900" id = "color"> </ p > < button onclick = "myBeginner()"> Click Here! </ button > < p id = "GFG"></ p > <!-- script to return the input color --> < script > function myBeginner() { var x = document.getElementById("color").value; document.getElementById("GFG").innerHTML = x; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example illustrates how to set the Property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Color value Property </ title > </ head > < body style="text-align:center;"> < h1 > w3wiki </ h1 > < h2 > HTML DOM Input Color value Property </ h2 > < p > Select your favorite color: < input type = "color" value = "#009900" id = "color"> </ p > < button onclick = "myBeginner()"> Click Here! </ button > < p id = "GFG" style="font-size:20px;color:green;"></ p > <!-- script to change the input color --> < script > function myBeginner() { var x = document.getElementById("color").value = "#FF8040"; document.getElementById("GFG").innerHTML = "The value was changed to " + x; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM input color value property listed below:
- Google Chrome 20
- Edge 14
- Firefox 29
- Opera 12
- Safari 12.1
Contact Us