Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Avec HTML5 on peut associer à tout élément des attributs data-* et aux éléments de type block l'attribut contenteditable.
Dans le chapitre précédent nous avons vu que la balise INPUT type ="text" dispose désormais de nouveaux attributs.
C'est l'un des grandes nouveautés de HTML5. Le développeur peut associer à chaque élément des données en créant ses propres attributs.
Seule condition : le nom de chaque attribut doit commencer par "data-".
C'est pour cette raison que l'on parle des attributs data-*.
Ces attributs personnalisés peuvent ensuite être utilisés par CSS et JavaScript.
Faisons un peu de biologie aquatique !
Les images apparaissent ombrées.
Les image ayant l'attribut "data-non" seront ombrées.
Les éléments figure centrés horizontalement dans la page.
Les images sont contenues dans une balise FIGURE.
La fonction remplit chacune des balises figcaption associée à une image.
Pour la première image avec la méthode traditionnelle getAttribute()
Pour la deuxième image avec la nouvelle propriété JavaScript dataset.
La syntaxe est alors : élément.dataset.attribut
Attention dans cette syntaxe l'attribut personnalisé doit être débarassé du préfixe "data-" .
Avec HTML5 tous les éléments peuvent devenir éditables et non plus seulement les zones de texte des formulaires (balises INPUT & TEXTAREA).
Vous pouvez corriger, compléter le texte contenu ci-dessous dans un DIV.
La boîte DIV a l'attribut contenteditable= 'true' !
La fonction affiche le nouveau contenu de la boîte identifiée "boite".