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.
<!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 to return the input color -->
<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.
<!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 to change the input color -->
<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