Vous pouvez me contacter via Facebook (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.
img[data-nom] {box-shadow : 10px 10px 10px gray; width : 50% ; height :auto ;} figure {margin : 10px auto 10px auto}
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.
function info() { var image1 =document.querySelector("#image1") ; var legende1 =document.querySelector("figcaption") ; var nom1 = image1.dataset.nom; var description1 =image1.dataset.description; legende1.textContent = nom1 + " " + description1 ; var image2 =document.querySelector("#image2"); var legende2 =document.querySelectorAll("figcaption")[1]; var nom2 = image2.dataset.nom ; var description2 =image2.dataset.description ; legende2.textContent = nom2 + " " + description2; }
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).
Si vous n'êtes pas d'accord avec cette insertion vous pouvez la modifier puis vous cliquez sur le bouton.
La boîte DIV a l'attribut contenteditable= 'true' !
function fafficher() { var boite =document.querySelector('#boite'); var texte = boite.textContent ; alert("texte de la boîte :" + texte); }
La fonction affiche le nouveau contenu de la boîte identifiée "boite".