HTML | Propiedad deshabilitada de color de entrada DOM

La propiedad DOM Input Color disabled en HTML DOM se usa para establecer o devolver si un selector de color debe estar deshabilitado o no . Un elemento deshabilitado generalmente no se puede usar y no se puede hacer clic y generalmente es de color gris por defecto en todo el navegador. Esta propiedad se utiliza para reflejar el atributo HTML deshabilitado.

Sintaxis:

  • Se utiliza para devolver la propiedad inhabilitada.
    colorObject.disabled
  • Se utiliza para establecer la propiedad deshabilitada.
    colorObject.disabled = true|false

Valores de propiedad:

  • verdadero: especifica que el selector de color está deshabilitado.
  • false: Tiene un valor predeterminado. Define que el selector de color no estaría deshabilitado.

Valor devuelto: Devuelve un valor booleano que representa que el selector de color estaría deshabilitado o no.

Ejemplo-1: Este ejemplo ilustra cómo devolver la propiedad.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Color disabled Property
    </title>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2> 
        HTML DOM Input Color disabled 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").disabled;
            
            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: Este ejemplo ilustra cómo establecer la propiedad.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Input Color disabled Property
    </title>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2> 
        HTML DOM Input Color disabled 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").disabled = false;
            
            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:

Navegadores compatibles: los navegadores compatibles con la propiedad deshabilitada del color de entrada DOM 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 *