Extrait du cours: Programmation JavaScript: HTML dynamique
HTML dynamique
Modification dynamique du style
Modification des attributs CSS d’un objet lors du survol : récupération des événements onMouseOver et onMouseOut. Modification de la propriété style de l’objet courant : this.style=….
Ex. de Rollover
<td class=’derriere’ on Mouse Over = « this . style. background Color=’#00FF33′ » on Mouse Out = »this.style.backgroundColor=’#009900′ >choix</td>
Propriétés CSS :cf. http://fr.selfhtml.org/css/proprietes/
Pour changer dynamiquement la classe de style, on utilise la propriété universelle className
<td class=’derriere’ onMouseOver= »this.className=’devant' »
onMouseOut= »this.className=’derriere' »>choix</td>
Pour effacer dynamiquement un élément, on peut utiliser la propriété visibility= »hidden » (l’élément s’efface mais laisse un espace vide), ou display= »none » (l’élément s’efface complètement). Le rétablissement s’effectue alors avec visibility= »visible », ou display= »inline » (pour un affichage dans le flux) ou display= »block » (pour un affichage en superposition).
Modification dynamique du contenu d’un élément
La propriété innerHTML permet de modifier simplement le contenu d’une balise.
<table><tr><td onMouseOver= »this.innerHTML='<b>hello</b>' » onMouseOut= »this.
innerHTML ='<i>bonjour</i>' »>buongiorno</td></tr></table>
Le contenu complet d’un calque peut ainsi être redéfini en cours d’exécution.
<button onClick= »getElementById(‘calque’).innerHTML= » » >clickez pour vider le calque</button><div id=’calque’>Voici un calque</div>
Récupération dynamique des valeurs des champs d’un formulaire
Pour les champs checkbox, on examine la propriété checked de l’objet.
val1=document.get Element By Id (« champ1 »).checked;
Pour les champs text, on examine la propriété value de l’objet.
val4=document.get Element By Id (« champ4 »).value;
Pour les champs radio, l’objet identifié est un tableau. L’état des options s’obtient avec propriété checked du i ème élément du tableau.
document.get Elements By Name (« champ3 ») [i]. checked
Pour les champs <select>, l’objet est un tableau. Chaque élément de ce tableau correspond à un élément <option>.
La propriété selected indique si l’option est sélectionnée ou non. La valeur des options s’obtient avec propriété value du i ème élément du tableau. Si la propriété value de l’option n’est pas spécifiée, c’est le contenu de l’élément <option> qui sera renvoyé comme value.
if (document.get Element By Id (« champ5 ») [i]. selected ) { alert (document.get Element By Id (« champ5 »)[i].value; }
Le numéro de l’option sélectionné est donné par la propriété selected Index.
………..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Programmation JavaScript: HTML dynamique (158 KO) (Cours PDF)
