retour au cours

Trouver les coordonnées de la fenêtre du champ

importance: 5

Dans l’iframe ci-dessous, vous pouvez voir un document avec le “champ” vert.

Utilisez JavaScript pour trouver les coordonnées de la fenêtre des coins pointés par des flèches.

Il y a une petite fonctionnalité implémentée dans le document pour plus de commodité. Un clic à n’importe quel endroit montre les coordonnées là-bas.

Votre code doit utiliser DOM pour obtenir les coordonnées de la fenêtre de :

  1. Coin extérieur supérieur gauche (c’est simple).
  2. En bas à droite, coin extérieur (simple aussi).
  3. Coin intérieur supérieur gauche (un peu plus dur).
  4. En bas à droite, coin intérieur (il y a plusieurs façons, choisissez-en une).

Les coordonnées que vous calculez doivent être les mêmes que celles renvoyées par le clic de souris.

P.S. Le code devrait également fonctionner si l’élément a une autre taille ou bordure, qui n’est lié à aucune valeur fixe.

Open a sandbox for the task.

Coins extérieurs

Les coins extérieurs sont essentiellement ce que nous obtenons de elem.getBoundingClientRect().

Les coordonnées du coin supérieur gauche answer1 et du coin inférieur droit answer2 :

let coords = elem.getBoundingClientRect();

let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];

Coin intérieur supérieur gauche

Cela diffère du coin extérieur par la largeur de la bordure. Un moyen fiable pour obtenir la distance est clientLeft/clientTop :

let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

Coin intérieur en bas à droite

Dans notre cas, nous devons soustraire la taille de la bordure des coordonnées extérieures.

Nous pourrions utiliser la manière CSS :

let answer4 = [
  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];

Une autre façon serait d’ajouter clientWidth/clientHeight aux coordonnées du coin supérieur gauche. C’est probablement encore mieux :

let answer4 = [
  coords.left + elem.clientLeft + elem.clientWidth,
  coords.top + elem.clientTop + elem.clientHeight
];

Ouvrez la solution dans une sandbox.