HTML DOM Input Color list Property
Last Updated :
29 Aug, 2022
The input color list property in HTML DOM is used to return a reference to the datalist element that contains an input color field.
Syntax:
colorObject.list.id
Return Value: It returns a string value that represents the value of the id attribute of the datalist element.
Example: Below HTML code is used to return the input color list property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >HTML DOM Input Color list Property</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM Input Color list Property</ h2 >
< p >
Select your favorite color:
< input type = "color" value = "#009900"
id = "color" list = "color_list" >
</ p >
< datalist id = "color_list" >
< option value = "red" />
< option value = "green" />
< option value = "blue" />
< option value = "Brown" />
< option value = "yellow" />
</ datalist >< br >< br >
< button onclick = "btnclick()" >
Click Here!
</ button >
< p id = "paraID" style = "font-size:20px;color:green;" ></ p >
< script >
function btnclick() {
var x = document.getElementById("color").list.id;
document.getElementById("paraID").innerHTML = x;
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome 20
- Edge 14
- Firefox 29
- Opera 12
- Safari 12.1
Share your thoughts in the comments
Please Login to comment...