Auteur Auteur

Les fonctions getAttribute() et setAttribute()

Les fonctions getAttribute() et setAttribute() sont des méthodes permettant d'accéder aux attributs d'un élément HTML et de les modifier. Elles sont utilisées pour interagir avec les attributs data- personnalisés ainsi que pour obtenir et définir des attributs standards tels que id, class, src, href, etc.

1. La fonction getAttribute() :

La fonction getAttribute() est utilisée pour obtenir la valeur d'un attribut spécifié. Elle prend un paramètre, qui est le nom de l'attribut dont on souhaite obtenir la valeur.

Voici des exemples d'utilisation :

Exemple 1

const element = document.getElementById("myElement");
const value = element.getAttribute("data-custom-attribute");
console.log(value);

Dans cet exemple, nous accédons à l'élément avec l'ID myElement et récupérons la valeur de son attribut data-custom-attribute. La valeur est stockée dans la variable value et ensuite affichée dans la console.

Exemple 2

<a href="https://rudless.com" id="demo">Visiter rudless.com </a>

<script type="text/javascript">
  const a = document.getElementById("demo");
  const hrefValue = a.getAttribute("href");
  alert(hrefValue);
</script>

Dans cet exemple, nous récupérerons la valeur de l'attribut href qui est https://rudless.com et nous l'affichons

2. La fonction setAttribute() :

La fonction setAttribute() est utilisée pour définir ou modifier la valeur d'un attribut spécifié. Elle prend deux paramètres : le nom de l'attribut et la valeur à lui attribuer. Voici un exemple d'utilisation :

Exemple 1


const element = document.getElementById("myElement");
element.setAttribute("data-custom-attribute", "new value");

Dans cet exemple, nous accédons à l'élément avec l'ID myElement et modifions la valeur de son attribut data-custom-attribute en new value.

Exemple 2


<div><img id="demo" alt="Pas moyen" /></div>
<button onclick="setSrcAttribute()">Donner à img l'attribut src </button>

<script type="text/javascript">
    const image = document.getElementById("demo");
    
    function setSrcAttribute() {
      image.setAttribute("src", "images/star.png");
    }
    </script>

Dans cet exemple, nous donnons l'attribut src à l'élément <img>

Exemple 3

<div><img src="images/star.png" id="demo" /></div>
<button onclick="changeSrcAttribute()">changer l'attribut src de img</button>

<script type="text/javascript">
    const img = document.getElementById("demo");
    
    function changeSrcAttribute() {
      img.setAttribute("src", "images/sunflower.png");
    }
    </script>

Dans cet exemple, nous changeons la valeur de l'attribut src de l'élément <img>

3. Utilisation d'attributs standards :

Ces fonctions peuvent également être utilisées pour obtenir et définir des attributs standards tels que id, class, src, href, etc. Voici des exemples : 


const element = document.getElementById("myElement");

// Obtention de l'ID de l'élément
const id = element.getAttribute("id");
console.log(id);

// Modification de la classe de l'élément
element.setAttribute("class", "new-class");

// Modification de la source d'une image
const image = document.getElementById("myImage");
image.setAttribute("src", "new-image.jpg");

Dans cet exemple, nous obtenons l'ID de l'élément et le stockons dans la variable id. Ensuite, nous modifions la classe et la source d'une image à l'aide de setAttribute().

4. Utilisation d'attributs data- personnalisés :

Les attributs data- personnalisés sont utiles pour stocker des informations supplémentaires sur un élément. Voici un exemple d'utilisation : 


const element = document.getElementById("myElement");

// Obtention de l'attribut "data-custom-data"
const customData = element.getAttribute("data-custom-data");
console.log(customData);

// Modification de l'attribut "data-custom-data"
element.setAttribute("data-custom-data", "456");

Dans cet exemple, nous avons un élément avec un attribut "data-custom-data" défini sur la valeur "123". Nous utilisons getAttribute() pour obtenir cette valeur et setAttribute() pour la modifier en "456".

Ce cours complet sur les fonctions getAttribute() et setAttribute() vous permettra d'utiliser facilement ces deux méthodes pour interagir avec les attributs HTML en JavaScript.

Précédent
Suivant