DOM HTML comment créer un attribut et l’ajouter à un élément. 

.....

Définition et utilisation méthode CreateAttribute() 

JavaScript cours tutorial

La méthode CreateAttribute() crée un attribut avec le nom spécifié.

Puis pour donner une valeur à l’attribut ainsi créé on utilise l’objet att et la propriété value de cet objet.

Après avoir créé le nouveau nœud d'attribut, utilisez la méthode setAttributeNode  pour l'ajouter à un élément. 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La méthode CreateAttribute () est prise en charge dans tous les principaux navigateurs.

Syntaxe

document.createAttribute(attributename)

Paramètres

Paramètre Type Description
attributename Attr object Obligatoire. Le nom de l’attribut à créer

Exemple Créer un attribut  classe, avec la valeur « dmoclass » et l'insérer dans le premier  élément H1 :

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title> Exemple fonction createAttribute</title>
  <style type="text/css">
  .dmoclass{
           color:#f00;
  }
  </style>
  </head>
  <body>
  <h1>Bonjour tout le monde</h1>
  <p id="dmo"> cliquez sur le bouton pour créer un attribut « class » avec la
  valeur « dmoclass » et l'insérer dans l'élément H1.</p>
  <button onclick="myFunction()"> Voir</button>
  <script>
  function myFunction()
  {
  var h1=document.getElementsByTagName("H1")[0];
  var att=document.createAttribute("class");
  att.value="dmoclass";
  h1.setAttributeNode(att);
  }
  </script>
  </body>
  </html>

 

Exemple Ajouter un attribut à l’élément table

Dans cet exemple on va ajouter un attribut width à l’élément table

Sélectionner le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title> Exemple Ajouter un attribut à un élément </title>
  </head>
  <body>
  <script language="JavaScript">
  function function1() {
      var newAttr = document.createAttribute("width");
      newAttr.nodeValue = "400px"
      document.getElementById("table1").setAttributeNode(newAttr);
  }
  </script>
  <table id="table1" border=3 cellpadding="5" style="border-color:blue">
      <tr>
          <th>Cellule entête un </th>
          <th>Cellule entête deux </th>
      <tr>
           <tr>
          <td>Cellule un </td>
          <td>Cellule deux </td>
      <tr>
  </table><br>
  <input type="button" value="Ajouter un attribut à la table"
  onclick="function1();">
  </body>
  </html>

 
Par carabde 30 mars 2014