id, class, attributs id et class

Utilisation

id="..." : identificateur d'élément
Cet attribut permet d'assigner un nom à l'instance d'élément où il apparaît. Il peut être utilisé comme destination pour un hyperlien, référence pour un script, identifier une déclaration de l'élément <OBJECT> ou encore permettre aux feuille de styles d'appliquer un style à un élément en particulier.

class="..." : .............
L'attribut class permet d'assigner un ou plusieurs noms de classes (séparés par des espaces) à l'instance spécifique de l'élément où il apparaît. On se sert souvent des noms de classes pour appliquer des styles.

Valeur possible

pour id :
La valeur de l'attribut id doit être unique dans le document

pour class :
On peut assigner le même nom de classe à plusieurs éléments dans un même document.

Remarques :

Exemples d'utilisation :

<STYLE>
.notes {BACKGROUND-COLOR: aliceblue; font-weight: bold;border-style:groove;border-width: 5px;
	color: darkgray; font-size:8pt; padding:5px; width:600px; text-align:left;}
</STYLE>

<P class="notes">L'attribut <FONT COLOR="#FF0000"><B>class</B></FONT>
 permet de spécifier dans une balise une classe prédifinie</P>

<P id=parag1 >...contenu du paragraphe N° 1...</P>
<P id=parag2 >...contenu du paragraphe N° 2...</P>
<INPUT type=button value="change contenu" onclick="change();"> 
<INPUT type="button" value="restaure contenu" onclick="restaure();">  
<SCRIPT>
function change() {
parag1.innerHTML="Nouveau contenu du <B>premier paragraphe</B>";
parag2.innerHTML="Nouveau contenu du <B>deuxième paragraphe</B>";
}
function restaure() {
parag1.innerHTML="contenu du paragraphe N°1";
parag2.innerHTML="contenu du paragraphe N°2";
}
</SCRIPT>

Autre exemple :

Pour passer d'un style à l'autre ( styles prédéfinis ), on se sert de l'attribut class. Plus précisément, des fonctions ( script ) modifient dynamiquement la valeur de l'attribut class. On appelle ces fonctions à la suite d'événements : clic de la souris, touches du clavier...

<STYLE>
.highlight	{color:white; background:blue; font-style:normal; font-size:14pt}
.notes {
	BACKGROUND-COLOR: aliceblue; font-weight: bold;border-style:groove;border-width: 5px; 
	color: darkgray; font-size:8pt; padding:5px; width:600px; text-align:left;
}
</STYLE>

<P id=P1 class=notes> Pour passer d'un style à l'autre ( styles prédéfinis ), on se sert de l'attribut
 class. Plus précisément, des fonctions ( script ) modifient dynamiquement la valeur de l'attribut
 class. On appelle ces fonctions à la suite d'événements : clic de la souris, touches du clavier... </P>

<INPUT type=button value="Modifier le style" onclick="changestyle();">
<INPUT type=button value="Revenir au style initial" onclick="revenirstyle();">

<SCRIPT language=javascript>

function changestyle() {
P1.className="highlight";
}

function revenirstyle() {
P1.className="notes";
}
</SCRIPT>

attributs id et class (réalisation en cours)

Remarques :

Exemples d'utilisation :

Autre exemple :