La propriété classList permet d’accéder à la liste des classes appliquées à un élément HTML, de manière simple et efficace via les méthodes suivantes :
length: retourne le nombre de classesadd(nom_classe): ajoute une classecontains(nom_classe): retournetruesi une classe est présente etfalsesinonremove(nom_classe): supprime une classetoggle(nom_classe): ajoute ou supprime une classe, si elle est présente initialement ou nontoString(): retourne la chaîne de texte complète
Ceci autorise des changements dynamiques, de style principalement, dans le document, en appliquant ou non des classes, à la volée, par exemple suite à des actions de l’utilisateur. En revanche, cela suppose d’avoir au préalable sélectionné un élément, grâce aux fonctions telles que querySelector et querySelectorAll
Le code HTML de l’exercice
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>objet classlist</title>
<style>
.cible {
border: 1px solid #999;
padding: 1em;
background-color: white;
transition: all;
transition-duration: 1s;
}
.style01 {
background-color: coral;
}
.style02 {
background-color: darkkhaki;
}
</style>
<script src="js/classlist.js"></script>
</head>
<body>
<h1>objet classlist</h1>
<div id="ex01">
<h2>Exercice 1</h2>
<button class="bouton b1">Ajouter style01</button>
<button class="bouton b2">Retirer style01</button>
<button class="bouton b3">Basculer style01</button>
<button class="bouton b4">Permuter style01/style02</button>
<div class="cible c1">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, ea doloremque maxime quis fugiat mollitia ad nisi doloribus facilis. Nam officia dicta vero. Nemo eos nesciunt quod eligendi natus repellendus.</p>
</div>
<script>
var b1 = document.querySelector('.b1');
var b2 = document.querySelector('.b2');
var b3 = document.querySelector('.b3');
var b4 = document.querySelector('.b4');
var c1 = document.querySelector('.c1');
b1.onclick = function () {
c1.classList.add('style01');
};
b2.onclick = function () {
c1.classList.remove('style01');
};
b3.onclick = function () {
c1.classList.toggle('style01');
};
b4.onclick = function () {
if (c1.classList.contains('style01')) {
c1.classList.replace('style01', 'style02');
} else {
c1.classList.replace('style02', 'style01');
}
};
</script>
</div>
</body>
</html>
Résultat de l’exercice
Évaluation
Consigne
Le schéma sur une description « désactive (remet en opacité d’origine) les descriptions et les images correspondant à chacun des périphériques et « active » (remet en opacité 1) la description et l’image du périphérique sélectionné.
Un clic sur le schéma désactive tout.
Un clic sur le mot « Mobile » fait illuminer le mobile du schéma :
Un clic sur le mot « Tablette » fait illuminer la tablette du schéma :
Un clic sur le mot « PC » fait illuminer le PC du schéma :
Le code JavaScript ci-dessous (controle_classe.js) nous a été remis pour l’évaluation :
function ajouteClasse(selecteur, classe) {
document.querySelectorAll(selecteur).forEach(
function(element) {
element.classList.add(classe);
}
);
}
function retireClasse(selecteur, classe) {
document.querySelectorAll(selecteur).forEach(
function(element) {
element.classList.remove(classe);
});
}
function basculeClasse(selecteur, classe) {
document.querySelectorAll(selecteur).forEach(
function(element) {
element.classList.toggle(classe);
});
}
function permuteClasse(selecteur, ancienneClasse, nouvelleClasse) {
document.querySelectorAll(selecteur).forEach(
function(element) {
element.classList.replace(ancienneClasse, nouvelleClasse);
});
}Mon code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Schéma interactif</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="conteneur">
<div class="titre">
<h1>Schéma interactif</h1>
</div>
<div class="blocAffichage">
<div class="image" id="image01">
<img src="images/mobile.png" />
</div>
<div class="image" id="image02">
<img src="images/tablette.png" />
</div>
<div class="image" id="image03">
<img src="images/pc.png" />
</div>
<div class="" id="image04">
<img src="images/fond.png" />
</div>
</div>
<div class="blocPeripheriques">
<div>
<a href="images/mobile.png" id="lien01">
<h3>Mobile</h3>
</a>
</div>
<div>
<a href="images/tablette.png" id="lien02">
<h3>Tablette</h3>
</a>
</div>
<di>
<a href="images/pc.png" id="lien03">
<h3>PC</h3>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/controle_classe.js"></script>
<script>
var lien01 = document.querySelector('#lien01');
var lien02 = document.querySelector('#lien02');
var lien03 = document.querySelector('#lien03');
var lien04 = document.querySelector('.blocAffichage');
lien01.onclick = function () {
retireClasse('.imageActive', 'imageActive')
ajouteClasse('#image01', 'imageActive');
return false;
}
lien02.onclick = function () {
retireClasse('.imageActive', 'imageActive')
ajouteClasse('#image02', 'imageActive');
return false;
}
lien03.onclick = function () {
retireClasse('.imageActive', 'imageActive')
ajouteClasse('#image03', 'imageActive');
return false;
}
lien04.onclick = function () {
retireClasse('.imageActive', 'imageActive')
ajouteClasse('#image04', 'imageActive');
return false;
}
</script>
</body>
</html>Mon code CSS :
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#conteneur {
width: 600px;
margin: 0 auto;
}
.blocAffichage {
position :relative;
margin: 0;
height:338px;
}
.image {
position: absolute;
top: 0;
left: 0;
transition: all;
transition-duration: 1s;
opacity: 0;
}
.blocPeripheriques a {
display:block;
border: solid 1px #999;
margin: 8px 0;
padding:8px;
color: #999;
text-decoration:none;
}
.blocPeripheriques a:hover {
border: solid 1px #000;
color: #000;
}
.image.imageActive {
display: block;
opacity: 1;
}