¿Cuál es la diferencia entre el valor del elemento y el atributo de datos?

El atributo de valor del elemento especifica el valor predeterminado del elemento HTML, mientras que el atributo de datos le permite almacenar datos adicionales en etiquetas en HTML cuando ningún otro atributo HTML puede hacerlo.

Valor del elemento: el elemento HTML es la colección de etiquetas de inicio y finalización con el contenido insertado entre ellas.

Ejemplo:

HTML

<!DOCTYPE html>  
<html>
<body>
   <label>Website: </label>
   <input type=“text” 
          value="GeeksForGeeks"/>    
</body>
</html>

Producción:

Valor del elemento

Atributo de datos:

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
<script>
   function showDetails(vehicle) {
     var vehiclePrice = 
         vehicle.getAttribute("data-vehicle-price");
     alert(vehicle.innerHTML 
           + " is of cost " +  vehiclePrice + ".");
   }
 </script>
 <style>
    h1{
      color:green;
    }
    li{
      margin-top:5px;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <h1>Vehicle</h1> 
    
<p>Click on a vehicle to see how much it Cost:</p>
   
  <ul>
   <li onclick="showDetails(this)" 
       id="Bike" data-vehicle-price="Rs. 80,000">     
     Bike</li>
   <li onclick="showDetails(this)" 
       id="Car" data-vehicle-price="Rs. 7,00,000 ">
     Car</li>  
   <li onclick="showDetails(this)" 
       id="Truck" data-vehicle-price="Rs. 3,00,000 ">
     Truck</li>  
  </ul>
</body>
</html>                    

Producción:

           

Valor del elemento

Atributo de datos

El valor del elemento se puede implementar usando elementos HTML <input>,

Solo los elementos <button>,<meter>,<li>,<option>,<progress> y <param> .

El atributo de datos se puede utilizar con todos los elementos HTML.

Se utiliza de manera diferente para diferentes elementos. Por ejemplo, los valores de los elementos <button>,<input> especifican el valor inicial del elemento.  

Para elementos <param> , el atributo de valor especifica el valor del parámetro. 

Se utiliza para definir atributos de datos personalizados y para almacenar datos personalizados, privados para la página o aplicación.
Para el valor del elemento, no necesitamos darle ningún nombre. El valor debe ser una string. El nombre del atributo no puede tener letras mayúsculas y debe tener al menos un carácter y el prefijo con ‘datos-‘.

Publicación traducida automáticamente

Artículo escrito por archnabhardwaj 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 *