Fonctions usuelles dans le navigateur

23min
il y a 3 ans
Télécharger la vidéo
Résumé Support

Dans ce chapitre nous allons voir quelques fonctions utiles que l'on retrouvera assez souvent dans du code JavaScript côté navigateur.

Positionnement

Il existe 2 moyens de récupérer la position d'un élément.

  • getBoundingClientRect() retourne un DOMRect fournissant des informations sur la taille de l'élément et sa position de l'élément par rapport à la zone d'affichage.
  • offsetLeft et autre propriété commençant par "offset" permet de récupérer la position de l'élément par rapport à son noeud offsetParent().

Il est possible d'utiliser les propriétés offset de manière récursive pour connaitre la position d'un élément par rapport au haut du document à l'aide de la récursivité.

/** * Récupère la position d'un élément par rapport au document * @param {HTMLElement} element **/ function recursiveOffsetTop (element) { if (element.offsetParent) { return element.offsetTop + recursiveOffsetTop(element.offsetParent) } return element.offsetTop }

Dataset

Les éléments HTML peuvent recevoir des attributs de données qui permettent de passer des information vers le JavaScript. Ces attributs seront préfixé par un data-.

<article data-author="John Doe" data-author-age="18"> ... </article>

Il sera ensuite possible de récupérer ces attributs avec une propriété spéciale dataset.

const article = document.querySelector('article') article.dataset.author // "John Doe" article.dataset.authorAge // "18"

Vous pouvez aussi utiliser dataset en écriture pour ajouter des attributs de données à un élément.

article.dataset.publisher = "Mon Petit Livre"

Animation CSS

Il est possible d'animer un élément à l'aide de la méthode animate qui utilisera le même principe d'animation que les animations CSS.

document.querySelector("button").animate([ // étapes/keyframes { transform: 'translateY(0px)' }, { transform: 'translateY(-300px)' } ], { // temporisation duration: 1000, iterations: Infinity })

Les média query

Si on souhaite effectuer une opération en fonction de la dimension de l'écran il est possible d'utiliser le système de media-query déjà vu en CSS.

const mediaQuery = window.matchMedia("(min-width: 400px)") mediaQuery.matches // true ou false suivant la taille de l'écran

Il est aussi possible d'utiliser un écouteur d'évènement pour détecter le changement.

mediaQuery.addEventListener('change', e => { e.matches // true ou false suivant la taille de l'écran })