Définit un formulaire HTML pour la saisie utilisateur
Définition et utilisation méthode CreateAttribute()
JavaScript cours tutorialLa 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
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 :
Exemple : Copier 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
Exemple : Copier 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