Tuto Javascript

L'attribut data

L'attribut data permet de stocker des informations dans une balise HTML. Cette information pourra être ensuite récupérée, puis modifiée ou exécutée dans une fonction Javascript.

Exemple d'utilisation de l'attribut data

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>test data</title>
    <style>
        #carre{background-color:red;width:100px;height:100px;left: 0px;}
        #lebtn{background-color:blue;width:100px;height:20px;}
    </style>
</head>
<body>
    <div id="carre"></div>
    <div id="lebtn" onclick="vasy()"></div>
    <script>
        var lecarre = document.getElementById('carre');
        var dataValeur = 0;

        function vasy(){
            dataValeur+=100;
            lecarre.setAttribute("data-pos-left", dataValeur);
            lecarre.style.marginLeft = lecarre.getAttribute('data-pos-left')+"px"; 
        };
    </script>
</body>
</html>