HTML5 c'est aussi 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-*.
Faisons un peu de biologie aquatique !
Code HTML :
Le script :
function info() { var image =document.querySelector("img") ; var nom = image.getAttribute("data-nom"); var description =image.getAttribute("data-description"); alert("nom animal : " + nom + " description : " + description); var nom =image.dataset.nom; var description =image.dataset.description ; alert("nom espèce : " + nom + " description espèce : " + description); }
La fonction affiche deux fois le nom et la description de l'animal.
Une première fois avec la méthode getAttribute(nomattribut) puis avec l'API dataset. Attention dans cette syntaxe l'attribut doit être débarassé du préfixe "data-" .
L'API dataset n'est pas encore implémentée sur tous les navigateurs.
Le célèbre framework JS et CSS qui permet de créer rapidement la version mobile d'un site exploite systématiquement les attributs data-* !
La bibiothèque jQuery Mobile est évoquée dans le tuto "JavaScript & jQuery" dans ce site !
Découvrez jQuery Mobile
Avec HTML5 on peut désormais modifier le texte d'une boite.
Si vous n'êtes pas d'accord avec cette insertion vous la modifier.
Rassurez le texte que vous saisissez n'est pas conservé. Voir script.
Le CSS :
div {border : 1px solid red ; width :80% ; min-height : 100px ; overflow : hidden ; resize : both; }
La nouvelle propriété CSS3 resize autorise le redimensionnement d'une boite à condition de lui avoir appliqué avant la propriété overflow.
Valeurs possibles de resize : none (valeur par défaut) : taille non modifiable ; both : modifiable dans les deux sens ; horizontal ; vertical.
Le code HTML :
La boîte DIV a l'attribut contenteditable= 'true' !
Jusqu'à présent seuls les champs de formulaire (input, textarea) étaient éditables.
Désormais toutes les éléments block peuvent devenir éditables à condition de leur attribuer conteneditable ='true' .
Le script :
function fafficher() { var boite =document.querySelector('div'); var texte = boite.textContent ; alert("texte de la boîte :" + texte); }
La fonction affiche le contenu de la boîte DIV (sans le balisage).
Retour menu