qcm-8: Manipulation styles / classes CSS
Soit le fichier HTML suivant:
<ul>
<li class="displayed" id="first-item">premier</li>
<li class="hidden">deuxième</li>
<li class="hidden">troisième</li>
</ul>
Quelle est la fonction du DOM la plus directe pour:
- accéder au premier élément
<li>
depuis JavaScript ?
- getElementById()
- getElementByClassName()
- getElementsByClassName()
- getElementsByTagName()
- accéder à tous les éléments
<li>
portant la classe"hidden"
?
- getElementById()
- getElementByClassName()
- getElementsByClassName()
- getElementsByTagName()
- accéder à tous les éléments
<li>
?
- getElementById()
- getElementByClassName()
- getElementsByClassName()
- getElementsByTagName()
Comment retirer la classe "hidden"
des deux derniers éléments <li>
?
- document.getElementsByClassName('hidden').className = '';
- document.getElementsByClassName('hidden').setAttribute('class', '');
- document.getElementsByClassName('hidden').classList.remove('hidden');
- (il faut utiliser une boucle)
Imaginez que vous disposez de la page HTML suivante:
<bouton id="mon-bouton">cliquez ici !</bouton>
Et de la règle CSS suivante:
.hidden {
display: none;
}
Écrivez le code JavaScript nécéssaire pour que la classe hidden
soit ajoutée au bouton une fois que l'utilisateur aura cliqué dessus, à l'aide de la propriété classList
.