ToggleClass, getHeight, fonctions javascript

jQuery possède de nombreuses fonctions pratiques pour manipuler les éléments du DOM Document Object Model, et leurs attributs. En pur javascript, ces fonctions n’existent pas et il faut les programmer. Voici deux petites fonctions très pratiques, l’une pour ajouter une classe si elle n’existe pas ou l’enlever si elle existe, la seconde pour connaître la hauteur réelle d’un élément lorsque celui est caché avec les propriétés CSS max-heigth: 0 et overflow: hidden. Cette deuxième fonction peut s’avérer utile lorsque l’on veut créer un effet de slide sur un élément.

Les textes DOM Element Prototype Method sur fond de tours à Singapour vues par dessous

ToggleClass()

On crée une méthode sur un élément du DOM que l’on sélectionne d’abord avec par exemple document.getElementById() ou document.querySelector(). Ce type d’élément possède la propriété className qui est une chaîne de caractère contenant le nom des classes séparés par un espace. Il s’agit de chercher le nom de la classe, l’ajouter si elle n’existe pas, la supprimer si elle existe. On termine la fonction en effaçant les espaces ajoutés en trop :

On appelle la méthode sur un élément du DOM, et l’on écrit le nom des classes dans les arguments. Les trois points SPREAD de l’ES6 ECMAScript 6 s’occupe de transformer cela en tableau :

Et l’on obtient :

getHeight()

Lorsque l’on veut faire un effet de slide sur un élément, il est bien de connaître la hauteur de cet élement. Toutefois, cela peut être difficile si l’élément est déjà fermé avec la propriété max-height à 0. Le code consistera à dupliquer l’élément dans le même élément parent afin d’hériter des mêmes propriétés CSS, de définir sa position en absolue, de le poussier loin de la vue de l’utilisateur, de lire la propriété clientHeight, et de le supprimer ensuite. Pour que le programme puisse lire cette propriété, il faut effacer l’élément dupliqué avec un léger retard. Dans le cas contraire, la hauteur retournée sera nulle.

On peut en profiter pour écrire une méthode afin de changer la hauteur d’un élément. Il n’y aura plus qu’à écrire les propriétés CSS pour obtenir un effet de slide vertical :

Et hop, on n’a plus qu’à appeler ces méthodes sur des éléments du DOM, après un click sur un bouton par exemple.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.