Maison > Article > interface Web > Comment stocker des données personnalisées en HTML en tant que données privées pour la page ou l'application ?
Comment stocker des données personnalisées en HTML en tant que données privées pour la page ou l'application ?
- PHPzavant
- 2023-09-12 14:25:02666parcourir
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>
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;
Syntaxe : accessible via CSS
Utilisez la fonction attr() de CSS pour accéder aux données.
sample_data::before {
content: attr(data-index);
}
Voici des exemples...
La traduction chinoise deExemple
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>
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!