Informatique


les attributs des balises HTML

Aller à

Faisons le tri

Dans ce chapitre on va causer de:

  • utiliser la propriété style suivie de la propriété sur laquelle agir
  • agir sur les classes avec la propriété classList sur la quelle on va appliquer des méthodes
  • utiliser et agir sur les attributs standards
  • utiliser et agir sur les attributs non standards

Modifier le style CSS d’une balise HTML

Pour ajouter ou modifier le style CSS d’une balise HTML, on va utiliser la propriété style de l’objet Element suivie de la propriété CSS à ajouter / modifier.

style est un objet à partir duquel on peut accéder à tous les styles.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelectorAll('.c1');
		for(let i=0;i<para.length;i++){
			para[i].style.fontSize="2em";
		}
	</script>

Il faut supprimer le tiret des propriétés CSS qui en contiennent et mettre une majuscule au deuxième mot (font-size devient fontSize par exemple).


Ajouter/Supprimer/Tester une classe

Pour ajouter/supprimer/tester une classe, on va utiliser la propriété classList de l’objet Element suivie de la méthode appropriée à laquelle on passe les paramètre.

La propriété classList propose 5 méthodes: add(), contains(), item(), remove() et toggle()

Ajouter une classe

Ajoutons les classes taille et deco au premier paragraphe, on utilise la méthode add(string,string,...).

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
			.taille{font-size:2em;}
			.deco{text-decoration:underline;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		var para=document.querySelector("p");
		para.classList.add("taille","deco");
	</script>
Supprimer une classe

Supprimons les classes taille et deco au premier paragraphe, on utilise la méthode remove(string,string,...).

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
			.taille{font-size:2em;}
			.deco{text-decoration:underline;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
	var para=document.querySelector("p");
	para.classList.add("taille","deco");
	//para.classList.remove("taille","deco");
	</script>
Tester si une classe est présente

Testons si les classes taille et deco sont sur le premier paragraphe, on utilise la méthode contains(string,string,...).
La méthode renvoie true ou false.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
			.taille{font-size:2em;}
			.deco{text-decoration:underline;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
	var para=document.querySelector("p");
	para.classList.add("taille","deco");
	alert(para.classList.contains("taille","deco"));
	</script>

Les attributs standards d'une balise

Pour modifier la valeur d’un attribut standard HTML, on utilise la propriété attributes de l’objet Element, en fait le nom de l’attribut dont on souhaite modifier la valeur (comme href par exemple).

Compte tenu de la séparation entre la mise en page (FS) et le squelette de la page (HTML) on est amené à ne manipuler que très peu d'attributs standards. Le plus souvent ce seront id, class, href et quelques autres...

Exemple 1 (avec for of)

Récupérons l'ensemble des attributs d'une balise avec la propriété attributes et affichons les noms des attributs et leur valeur.
la propriété attributes renvoie un tableau d'objets attributes sur lesquels on peut appliquer les propriétés name et value pour récupérer le nom et la valeur de l'attribut (W3School).

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p id=p1 class=a1 rep=coucou>Et allez donc...</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('#p1'),
		lesattr=para.attributes;
		document.write("La balise p contient "+lesattr.length+"<br>");
		for(val of lesattr){
			document.write(val.name+" a pour valeur "+val.value +"<br>");
		}
	</script>
Exemple 2 (avec for)
Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p id=p1 class=a1 rep=coucou>Et allez donc...</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('#p1'),
		lesattr=para.attributes;
		document.write("La balise p contient "+lesattr.length+"<br>");
		for(let i=0;i<lesattr.length;i++){
			document.write(lesattr[i].name+" a pour valeur "+lesattr[i].value +"<br>");
		}
	</script>
Exemple 3

Testons si une balise a des attributs ou un attribut particulier avec hasAttributes() et hasAttribute(nom_attr).
C'est deux méthode renvoient true ou false.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p id=p1 class=a1 rep=coucou>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('#p1');
		let flag1,flag2;
		flag1=para.hasAttributes();
		(flag1)?alert(para.id+" a des attributs"):alert(para.id+" n'a pas d'attributs");
		flag2=para.hasAttribute("rep");
		(flag2)?alert(para.id+" contient l'attribut"):alert(para.id+" ne contient pas l'attribut");
	</script>
Exemple 4

On peut directement accéder à la valeur d'un attribut d'une balise s'il s'agit d'un attribut standard.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('a');
		para.href="http://www.w3schools.com";
		//cliquer sur le lien, il a bien changé!
	</script>
Exemple 5

Il y a un petit piège concernant l'attribut class, celui-ci est un mot réservé de JavaScript, il faudra donc utiliser className.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelectorAll('.c1');
		for(let i=0;i<para.length;i++){
			para[i].className="c2";
		}
	</script>

Modifier le contenu d'un attribut non standard d'une balise

Les attributs non standards sont ceux qui sont créés par le programmeur, ceux-ci ne peuvent pas être ciblés de la façon classique par la syntaxe: Element.nom_attribut, l'exemple suivant le démontre.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1 rep=coucou>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('.a1');
		alert(para.className);
		alert(para.rep);
	</script>

On constate qu'on ne peut pas accéder à l'attribut rep!

La méthode getAttribute("nom_attribut")

Pour accéder aux attributs non standards il faut utiliser la méthode getAttribute("nom_attribut") de l'objet Element ou utiliser la propriété attributes et récupérer l'attribut dans le tableau renvoyé, mais c'est un peu plus fastidieux.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1 rep=coucou>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('.a1');
		alert(para.className);
		alert(para.getAttribute("rep"));
	</script>
La méthode setAttribute("nom_attribut","valeur")

Pour accéder aux attributs non standards il faut utiliser la méthode getAttribute("nom_attribut") de l'objet Element ou utiliser la propriété attributes et récupérer l'attribut dans le tableau renvoyé, mais c'est un peu plus fastidieux.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1 rep=coucou>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelector('.a1');
		alert(para.className);
		para.setAttribute("rep","brol");
		alert(para.getAttribute("rep"));
	</script>