Attributs des balises en tant que propriétés en JavaScript
Apprenons maintenant à obtenir les attributs des balises. La règle suivante s'applique : chaque attribut de balise correspond à une propriété du même nom dans l'élément DOM.
Regardons un exemple. Supposons que nous ayons une balise comme celle-ci :
html<input id="elem" type="text">
Obtenons une référence à notre élément dans une variable :
javascriptlet elem = document.querySelector('#elem');
Affichons les valeurs des attributs dont nous avons besoin :
javascriptconsole.log(elem.id); // affichera 'elem'
console.log(elem.type); // affichera 'text'
Et maintenant, pour l'exemple, modifions la valeur d'un attribut :
javascriptelem.type = 'submit';
L'input suivant est donné :
html<input id="elem" type="email">
Un bouton est également donné. Lorsqu'on clique sur le bouton, affichez
à l'écran le contenu de l'attribut type
de l'input mentionné ci-dessus.
L'input suivant est donné :
html<input id="elem" type="email">
Un bouton est également donné. Lorsqu'on clique sur le bouton, enregistrez
dans l'attribut type la valeur submit.
Supposons que vous ayez un lien sous la forme d'une balise a,
un bouton et un paragraphe. Lorsqu'on clique sur le bouton, affichez
dans le paragraphe le contenu de l'attribut href du lien.
Supposons que vous ayez un lien et un bouton. Lorsqu'on clique
sur le bouton, ajoutez à la fin du texte du lien
le contenu de son attribut href entre
parenthèses.
Supposons que vous ayez une image. Placez-la
sur la page à l'aide de la balise img.
Supposons qu'un bouton et un paragraphe soient également donnés. Faites
en sorte qu'au clic sur le bouton, le chemin de l'image provenant de son attribut src soit enregistré dans le paragraphe.
Une image dans la balise img et un bouton sont donnés.
Lorsqu'on clique sur le bouton, enregistrez dans l'attribut width
la valeur 300.
Une image dans la balise img et un bouton sont donnés.
Supposons qu'une certaine largeur soit définie dans l'attribut width. Créez un bouton sur lequel, lorsqu'on clique,
la largeur de l'image sera multipliée par 2.
Supposons que vous ayez deux images. Créez sur
la page une balise img et deux boutons. Lorsqu'on
clique sur le premier bouton, enregistrez dans l'attribut
src le chemin vers la première image, et lorsqu'on clique
sur le second - le chemin vers la deuxième image.