HTML | DOM li valor Propiedad

La propiedad de valor DOM Li se utiliza para establecer o devolver el valor del atributo de valor de un elemento de lista . El atributo de valor se utiliza para establecer el valor de los elementos de la lista y el otro elemento de la lista se incrementará a partir de ese valor numérico.
El valor puede ser un número y alfabético.

Sintaxis:

  • Devuelve la propiedad value.
    liObject.value
  • Se utiliza para establecer la propiedad de valor.
    liObject.value = number

Valor de propiedad: contiene un valor, es decir, un número que especifica el valor del elemento de la lista.

Valor devuelto: Devuelve un valor numérico que representa el valor del elemento de la lista.

Ejemplo-1: Este ejemplo devuelve una propiedad de valor.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM li value Property
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Li value Property 
  </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG" 
            value="100">
          Geeks
      </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
      Submit
  </button>
    <p id="sudo"
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function myGeeks() {
            // Accessing 'li' tag. 
            var g = 
                document.getElementById("GFG").value;
            document.getElementById(
              "sudo").innerHTML = g;
        }
    </script>
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

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

Ejemplo-2: Este ejemplo establece el valor Propiedad.

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM li value Property
  </title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
      DOM Li value Property
  </h2>
    <ol>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG"
            value="100">
          Geeks
      </li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ol>
    <button onclick="myGeeks()">
      Submit
  </button>
    <p id="sudo" 
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function myGeeks() {
            // Accessing 'li' tag. 
            var g = 
                document.getElementById(
                  "GFG").value = "200";
            
            document.getElementById(
              "sudo").innerHTML = 
              "The value was change form 100 to " + g;
        }
    </script>
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

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

Navegadores compatibles:

  • Google Chrome
  • Mozilla Firefox
  • Borde
  • Ó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 *