Propiedad de lista de rango de entrada HTML DOM

La propiedad de lista de rango de entrada en HTML DOM se usa para devolver una referencia al elemento de la lista de datos que contiene un campo de rango de entrada.

Sintaxis:

rangeObject.list.id

Valor devuelto : Devuelve un valor de string que representa el valor del atributo id del elemento de la lista de datos.

Ejemplo: El siguiente código HTML se usa para devolver la propiedad de lista de rango de entrada.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input range list Property
    </title>
  
    <style>
        #Geek_p {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM Input Range value property
    </h2>
    <input name=G eek_range type="range" 
        id="Geek_Range" list="rangers" value="90">
    <datalist id="rangers">
        <option value="15"/>
        <option value="20"/>
        <option value="40"/>
        <option value="30"/>
        <option value="35"/>
    </datalist>
    <br>
    <br>
    <button onclick="myGeeks()">
        Click Here
    </button>
    <p id="Geek_p"></p>
  
    <script>
        function myGeeks() {
            var x =
                document.getElementById(
                    "Geek_Range").list.id;
            document.getElementById(
                "Geek_p").innerHTML = x;
        }
    </script>
</body>
</html>

Producción:

 

Navegadores compatibles: el navegador es compatible con la entrada DOM Las propiedades del valor del texto se enumeran a continuación: 

  • Google Chrome
  • explorador de Internet
  • 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 *