Jusqu'à présent, nous avons surtout utilisé la propriété innerHTML
qui permet de
modifier le contenu d'une balise HTML. Il en existe d'autre qui vont permettre de
modifier d'autres propriétés des éléments HTML :
let element = getElementById ('Mon identifiant');
element.innerText = "Nouveau contenu";
innerText
ne permet d'insérer que du texte. Si vous souhaitez insérer du HTML,
vous devrez utiliser la propriété innerHTML
:
element.innerHTML = '<img src="image.jpg">';
L'exemple ci-dessous insère une image dans une balise HTML.
La propriété .style
permet de modifier le style CSS d'une balise HTML. La syntaxe générale est
présentée ci-dessous :
element.style.property = new_style;
.property
doit être remplacé par le style CSS (.color
, .font
, .padding
, .width
, ...) ;new_style
est la nouvelle valeur du style (red
, 100px
...)Voici quelques exemples :
element.style.color = 'red';
element.style.fontWeight = 'bold';
element.style.backgroundColor = '#FF00FF';
element.style.paddingTop = '100px';
L'exemple ci-dessous permet de modifier les styles CSS d'un paragraphe :
La fonction setAttribute()
permet de modifier l'attribut d'une balise HTML. La
syntage générale est donnée par :
element.setAttribute(name, value)
Voici quelques exemples :
element.setAttribute('src', "image.png";
element.setAttribute('href', "https://www.google.com";
element.setAttribute('style', "color:red;";
L'exemple ci-dessous permet de modifier l'attribut src
d'une image :
Modifier le code ci-dessous afin que le texte prenne la couleur du bouton qui est cliqué :
<p id="text">Cliquez pour changer ma couleur.</p>
<button>Rouge</button>
<button>Vert</button>
<button>Blue</button>
<button>Noir</button>
Voici le résultat escompté :
Modifier le code ci-dessous afin le lien soit modifié au moment où l'utilisateur
clique dessus. Le nouveau lien sera https://lucidar.me/fr/
:
<a href="https://www.google.com" target="_blank">Google</a>
Notez que ce type de lien est à éviter. Voici le résultat attendu :
Quelle propriété permet de modifier le texte d'une balise ?
.innerHtml
permet aussi de modifier le contenu, même s'il n'y a pas de HTML dedans.
Essaie encore ...
Quelle syntaxe permet de modifier le style d'une balise HTML ?
.setAttribute('style', 'colo:red')
on peut aussi modifier le style CSS.
Essaie encore ...
Quelle syntaxe permet de modifier l'image suivante :
<img src="sad.jpg">
element.attribute.src = "happy.jpg";
element.setAttribute ('src', 'happy.jpg');
element.setAttribute ('happy.jpg', 'src');
src
de la balise img
.
Essaie encore ...