Les attributs en HTML avec JS

Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML.

Les attributs viennent généralement en paires nom/valeur comme : nom=’valeur’

La balise <img> est utilisée pour intégrer une image dans une page HTML. L’attribut src spécifie le chemin vers l’image à afficher, exemple: <img scr="pc.jpeg">

Pour obtenir la valeur d’un attribut, nous pouvons utiliser la méthode getAttribute.

<!DOCTYPE html>
<html>
<head>
<title> exploiter getAttribute</title>
</head>
<body>
<p>récuperation du texte de la proriété alt</p>
<p id="demo"></p>
<img id="img1" src="sport.jpeg" alt="vive le sport">

<script>
const element = document.getElementById("img1"); 
let text = element.getAttribute("img1"); 
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Pour supprimer un attribut spécifique d’un élément, nous pouvons utiliser la méthode removeAtrribute().

La méthode setAttribute() est utilisée pour définir le nouvel attribut et sa valeur sur l’élément DOM. Si l’attribut existe déjà, la valeur de l’attribut est mise à jour avec la nouvelle valeur.

<!DOCTYPE html>
<html>
<head>
<style>
.newclass {
  color: red;
}
</style>
</head>
<body>
<h1 id="myH1">Exploitation de la méthode setAttribute</h1>

<p>Cliquez sur Ajouter une classe pour ajouter un attribut de classe à l'élément h1 :</p>

<button onclick="myFunction()">Ajouter une classe</button>

<script>
function myFunction() {
  document.getElementById("myH1").setAttribute("class", "newclass"); 
}
</script>

</body>
</html>

One thought on “Les attributs en HTML avec JS

  1. Vos explications restent toujours dans ma tête et bonne continuations monsieur. Bac 2014 informatique

Leave a Reply

Your email address will not be published. Required fields are marked *