JavaScript - Coordonnées du pointer et dimensions des élméments HTML

Coordonnées du curseur

• x: Cette propriété n'est pas standard dans tous les navigateurs, et son utilisation n'est pas recommandée. C'était historiquement utilisé pour représenter la coordonnée x de l'événement, mais elle est obsolète.
• clientX: Il s'agit de la coordonnée x de l'événement par rapport à la fenêtre visible (la zone du document qui est actuellement visible à l'écran). Si vous faites défiler la page, la valeur de clientX ne changera pas, car elle est toujours mesurée par rapport à la fenêtre visible.
• layerX: C'est une ancienne propriété non standard qui était utilisée dans certains navigateurs, mais elle est maintenant obsolète. Il est recommandé de ne pas l'utiliser.
• offsetX: C'est la coordonnée x de l'événement par rapport à l'élément sur lequel l'événement a été déclenché. Si l'événement a été déclenché sur un élément enfant, offsetX donnera la position par rapport à cet élément enfant.
• pageX: Il s'agit de la coordonnée x de l'événement par rapport à l'ensemble du document (la page web entière). Si vous faites défiler la page, la valeur de pageX changera en conséquence.
• screenX: C'est la coordonnée x de l'événement par rapport à l'écran. Cela signifie que screenX donne la position horizontale de l'événement par rapport au coin supérieur gauche de l'écran.

Obtenir les dimensions d'un élément et ses coordonnées

voici plusieurs moyens courants d'obtenir la taille et le positionnement d'un élément en JavaScript :

Pour la taille de l'élément :

1. clientWidth et clientHeight : Ces propriétés donnent la largeur intérieure (sans les bordures et les débordements) d'un élément.
2. offsetWidth et offsetHeight : Ces propriétés fournissent la largeur totale (y compris les bordures, les marges et les débordements) d'un élément.
3. getBoundingClientRect() : Cette méthode renvoie un objet contenant des informations sur la taille et le positionnement de l'élément, telles que width, height, top, bottom, left et right.

Pour le positionnement de l'élément :

1. getBoundingClientRect() : En plus des informations sur la taille, cette méthode fournit également des données sur le positionnement. top, bottom, left et right indiquent les positions relatives par rapport à la fenêtre.
2. offsetTop et offsetLeft : Ces propriétés donnent la position de l'élément par rapport à son parent direct positionné.
3. getComputedStyle(element).getPropertyValue('property') : Vous pouvez également utiliser getComputedStyle pour obtenir les propriétés CSS calculées, comme la propriété top, left, right, ou bottom.

Voici un exemple d'utilisation de quelques-unes de ces propriétés pour obtenir la taille et le positionnement d'un élément :

const element = document.getElementById('monElement');

const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;

const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;

const boundingRect = element.getBoundingClientRect();

const offsetTop = element.offsetTop;
const offsetLeft = element.offsetLeft;

const computedStyle = window.getComputedStyle(element);
const topValue = computedStyle.getPropertyValue('top');
const leftValue = computedStyle.getPropertyValue('left');

console.log('Client width: ' + clientWidth);
console.log('Client height: ' + clientHeight);

console.log('Offset width: ' + offsetWidth);
console.log('Offset height: ' + offsetHeight);

console.log('Bounding rect:', boundingRect);

console.log('Offset top: ' + offsetTop);
console.log('Offset left: ' + offsetLeft);

console.log('Top value from computed style: ' + topValue);
console.log('Left value from computed style: ' + leftValue);

Chaque méthode a ses avantages en fonction de ce que vous essayez de réaliser. Utilisez celle qui convient le mieux à votre cas d'utilisation spécifique.

www.alternative-rvb.com | Nicolas Malet | GITHUB | CODEPEN