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

{%hackmd @alternative-rvb/contact %}