HTML | Propiedad del valor predeterminado del color de entrada del DOM

La propiedad DOM Input Color defaultValue en HTML DOM se usa para establecer o devolver el valor predeterminado de un selector de color . Es el valor especificado en el atributo de valor.

Sintaxis:

  • Devuelve la propiedad defaultValue.
    colorObject.defaultValue
  • Se utiliza para establecer la propiedad defaultValue.
    colorObject.defaultValue = value

Valores de propiedad:

  • valor: Especifica el valor por defecto del selector de color.

Valor devuelto: Devuelve el valor del selector de color en forma de string.

Ejemplo-1: Este ejemplo devuelve el valor predeterminado de la propiedad Color de entrada.

<!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() {
            var x = 
                document.getElementById(
                  "color").defaultValue;
            
            document.getElementById(
              "GFG").innerHTML = x;
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Ejemplo-2: Esta propiedad ilustra cómo establecer la propiedad.

<!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() {
            var x = 
                document.getElementById(
                  "color").defaultValue = "#ff0080";
            
            document.getElementById(
              "GFG").innerHTML = 
              "The default value was changed to " + x;
        }
    </script>
</body>
  
</html>

Producción:

Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Navegadores compatibles: los navegadores compatibles con la propiedad DOM input color defaultValue se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 10.0 +
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *