HTML | DOM Input Color value Property
Last Updated :
24 Aug, 2022
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 >
GeeksForGeeks
</ h1 >
< h2 >
HTML DOM Input Color value Property
</ h2 >
< p >
Select your favorite color:
< input type = "color" value = "#009900"
id = "color">
</ p >
< button onclick = "myGeeks()">
Click Here!
</ button >
< p id = "GFG"></ p >
< script >
function myGeeks() {
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 >
GeeksForGeeks
</ h1 >
< h2 >
HTML DOM Input Color value Property
</ h2 >
< p >
Select your favorite color:
< input type = "color" value = "#009900"
id = "color">
</ p >
< button onclick = "myGeeks()">
Click Here!
</ button >
< p id = "GFG" style="font-size:20px;color:green;"></ p >
< script >
function myGeeks() {
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
Share your thoughts in the comments
Please Login to comment...