Skip to content

qcm-8: Manipulation styles / classes CSS

Compare
Choose a tag to compare
@adrienjoly adrienjoly released this 15 Feb 14:16
· 644 commits to master since this release

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:

  1. accéder au premier élément <li> depuis JavaScript ?
  • getElementById()
  • getElementByClassName()
  • getElementsByClassName()
  • getElementsByTagName()

  1. accéder à tous les éléments <li> portant la classe "hidden" ?
  • getElementById()
  • getElementByClassName()
  • getElementsByClassName()
  • getElementsByTagName()

  1. 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.