The Input Color object represents an HTML <input> element with type="color".
We can access an <input> element with type="color" by using getElementById().
<!DOCTYPE html>
<html>
<body>
Select your favorite color: <input type="color" id="myColor">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<!-- w w w. ja v a 2 s. c o m-->
<script>
function myFunction() {
var x = document.getElementById("myColor").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create an <input> element with type="color" by using the document.createElement() method.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!--from ww w.ja v a 2 s. c o m-->
var x = document.createElement("INPUT");
x.setAttribute("type", "color");
document.body.appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows:
| Property | Description |
|---|---|
| autocomplete | Sets or gets the autocomplete attribute of a color picker |
| autofocus | Sets or gets whether a color picker can automatically get focus when the page loads |
| defaultValue | Sets or gets the default value of a color picker |
| disabled | Enable or disable a color picker |
| form | Get a reference to the form that contains the color picker |
| list | Get the <datalist> element that contains the color picker |
| name | Sets or gets the name attribute of a color picker |
| type | Returns the type of the color picker |
| value | Sets or gets the value attribute of a color picker |
The Input Color object supports the standard properties and events.