Comment stocker des données personnalisées en HTML en tant que données privées pour la page ou l'application ?-tutoriel HTML-php.cn

Comment stocker des données personnalisées en HTML en tant que données privées pour la page ou l'application ?

PHPz

Libérer： 2023-09-12 14:25:02

avant

684 Les gens l'ont consulté

Comment stocker des données personnalisées en HTML en tant que données privées pour la page ou lapplication ?

Les attributs personnalisés sont des attributs spécialement conçus qui ne sont pas inclus dans les attributs HTML5 standard. Ils nous permettent de personnaliser les balises HTML en ajoutant nos propres données.

Un attribut personnalisé est tout attribut commençant par data-. Nous pouvons intégrer des attributs personnalisés sur tous les composants HTML à l'aide des attributs data-*.

Syntaxe : HTML

En HTML, la syntaxe des attributs data-* est relativement simple. Chaque élément commençant par data- est un attribut data-*.

<sample_data>
   id = “sample”
   data-index = 1
   data-row = 23
   data-column = 44
</sample_data>

Copier après la connexion

Syntaxe : accessible via JavaScript

L'accès à ces attributs de données à l'aide de JavaScript est également relativement simple. Nous pouvons utiliser getAttribute() avec son nom HTML complet, qui peut être lu à l'aide de l'attribut dataset.

const article = document.querySelector('#sample');
sample_data.dataset.index;
sample_data.dataset.row;
sample_data.dataset.column;

Copier après la connexion

Syntaxe : accessible via CSS

Utilisez la fonction attr() de CSS pour accéder aux données.

sample_data::before {
   content: attr(data-index);
}

Copier après la connexion

Voici des exemples...

La traduction chinoise de

Exemple

est :

Exemple

Dans l'exemple ci-dessous, nous utilisons JavaScript pour lire la valeur d'une propriété.

<!DOCTYPE html>
<html>
<body>
   <h1>Result</h1>
   <ul>
      <li onclick="showPosition(this)"
         id="Siddarth" data-position="winner">
         Siddarth
      </li>
      <li onclick="showPosition(this)"
         id="Arjun" data-position="runner up">
         Arjun
      </li>
      <li onclick="showPosition(this)"
         id="Badri" data-position="third">
         Badri
      </li>
      <li onclick="showPosition(this)"
         id="Nanda" data-position="lost">
         Nanda
      </li>
   </ul>
   <script>
      function showPosition(runner) {
         var position = runner.getAttribute("data-position");
         alert("The " + runner.innerHTML + " is " + position + ".");
      }
   </script>
</body>
</html>

Copier après la connexion

Sortie

Lors de l'exécution du script ci-dessus, il générera une sortie d'une liste de noms contenant certaines données.

Lorsque vous essayez de cliquer sur l'un des noms, la fonction récupère les données et affiche une boîte d'alerte affichant les données personnalisées que nous avons utilisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!