Open In App

HTML DOM Input Color defaultValue Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Input Color defaultValue Property in HTML DOM is used to set or return the default value of a Color picker. It is the value specified in the value attribute. 

Syntax:

  • It returns the defaultValue property.
colorObject.defaultValue
  • It is used to set the defaultValue property.
colorObject.defaultValue = value

Property Values: 

  • value: It specifies the default value of the Color picker.

Return Value: It returns the value of the color picker in the form of a string. 

Example 1: This example returns the defaultValue of the Input Color property. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM Input Color defaultValue Property
    </title>
</head>
 
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
        HTML DOM Input Color defaultValue Property
    </h2>
    <form id="myGeeks">
        <label>
            Select your favorite color:
        </label>
        <input type="color"
               value="#009900"
               name="Geek_color"
               id="color" disabled>
    </form>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="GFG" style="color:green;
            font-size:24px;">
    </p>
   
    <script>
        function myGeeks() {
            let x =
                document.getElementById(
                    "color").defaultValue;
 
            document.getElementById(
                "GFG").innerHTML = x;
        }
    </script>
</body>
   
</html>


Output: 

 

Example 2: This Property illustrates how to set the Property. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM Input Color defaultValue Property
    </title>
</head>
 
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
        HTML DOM Input Color defaultValue Property
    </h2>
    <form id="myGeeks">
        <label>
            Select your favorite color:
        </label>
        <input type="color"
               value="#009900"
               name="Geek_color"
               id="color" disabled>
    </form>
    <button onclick="myGeeks()">
        Click Here!
    </button>
    <p id="GFG" style="color:green;
            font-size:24px;">
    </p>
   
    <script>
        function myGeeks() {
            let x =
                document.getElementById(
                    "color").defaultValue = "#ff0080";
 
            document.getElementById(
                "GFG").innerHTML =
                "The default value was changed to " + x;
        }
    </script>
</body>
   
</html>


Output: 

 

Supported Browsers: The browsers supported by DOM input color defaultValue property are listed below:

  • Google Chrome 20
  • Edge 14
  • Firefox 29
  • Opera 12
  • Safari 12.1


Last Updated : 16 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads