From 42fa0779cb86e303db29e3603901b000523173cf Mon Sep 17 00:00:00 2001 From: Jacquet Corentin Date: Sat, 20 Mar 2021 20:58:14 +0100 Subject: FIX: Typos and enhancement in Example (issues 97) (#246) * Typos and enhancement in Example (issues 97) * Fix some attributes name, update tags, modify typo * Update image link * fix broken link to DOMRect in return value --- .../api/element/getboundingclientrect/index.html | 80 ++++++++++++++-------- 1 file changed, 50 insertions(+), 30 deletions(-) (limited to 'files/fr/web/api/element') diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html index ba2e4c2a85..7dd9a66904 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ b/files/fr/web/api/element/getboundingclientrect/index.html @@ -1,27 +1,43 @@ --- -title: element.getBoundingClientRect +title: Element.getBoundingClientRect() slug: Web/API/Element/getBoundingClientRect tags: - API - - CSSOM + - Boundary + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - Method - Méthode - - Référence(2) + - Minimum + - Rectangle + - Reference + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight translation_of: Web/API/Element/getBoundingClientRect ---
{{APIRef("DOM")}}
-

La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.

+

La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.

-

Syntaxe

+

Syntaxe

-
objetRect = object.getBoundingClientRect();
-
+
objetRect = object.getBoundingClientRect();
-

Valeur de retour

+

Valeur de retour

-

La valeur de retour est un objet DOMRect qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés left, top, right, bottom, x, y, width, et height, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que width et height sont relatives au coin en haut à gauche de la zone d'affichage.Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.

+

La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés left, top, right, bottom, x, y, width, et height, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que width et height sont relatives au coin en haut à gauche de la zone d'affichage.Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.

-

Les propriétés width et height de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le padding et border-width, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété width ou height de l'élément + padding + border-width. Mais si box-sizing: border-box est définit pour l'élément, cela correpondrait seulement width ou height.

+

Les propriétés width et height de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le padding et border-width, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété width ou height de l'élément + padding + border-width. Mais si box-sizing: border-box est défini pour l'élément, cela correpondrait seulement width ou height.

La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.

@@ -31,11 +47,11 @@ translation_of: Web/API/Element/getBoundingClientRect

Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés top et left (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.

-

Solution de prise en charge multi-navigateurs

+

Solution de prise en charge multi-navigateurs

Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser window.pageXOffset et window.pageYOffset plutôt que window.scrollX et window.scrollY. Les scripts qui ne peuvent pas utiliser window.pageXOffset, window.pageYOffset, window.scrollX ou window.scrollY pourront utiliser cette méthode :

-
// Pour scrollX
+
// Pour scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
   && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
 // Pour scrollY
@@ -43,14 +59,13 @@ translation_of: Web/API/Element/getBoundingClientRect
   && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
 

 
-
Exemple

+
Exemple

 
 
Ce simple exemple récupère l'objet DOMRect représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.

 
-
<div></div>
-

+
<div></div>

 
-
div {
+
div {
   width: 400px;
   height: 200px;
   padding: 20px;
@@ -58,24 +73,32 @@ translation_of: Web/API/Element/getBoundingClientRect
   background: purple;
 }

 
-
let elem = document.querySelector('div');
-let rect = elem.getBoundingClientRect();
-for (var key in rect) {
+
let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (let key in rect) {
   if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
+    let para = document.createElement('p');
     para.textContent  = `${ key } : ${ rect[key] }`;
     document.body.appendChild(para);
   }
 }

 
-
Spécifications

+
{{EmbedLiveSample('Example', '100%', 640)}}

+
+
Remarquez comme les width/height sont égales à
+  width/height + padding.

+
+
Remarquez aussi que les valeurs de x/left,
+  y/top, right, et bottom sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.

+
+
Spécifications

 
 
-   
-   
+   
+   
@@ -91,11 +114,11 @@ for (var key in rect) {
 
 
L'objet DOMRect retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement DOMRectReadOnly. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet ClientRect qu'ils retournent empêche d'ajouter le support de x et y.

 
-
En raison de problèmes de comptabilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés top, left, right, et bottom.

+
En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés top, left, right, et bottom.
Les propriétés dans l'objet DOMRect retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs in et for...in vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que Object.assign() et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.

 
-
rect = elt.getBoundingClientRect()
+
rect = elt.getBoundingClientRect()
 // The result in emptyObj is {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
@@ -103,14 +126,11 @@ emptyObj = { ...rect }
 
 
Les propriétés top, left, right, et bottom de DOMRect sont calculées en utilisant les valeurs des autres propriétés de l'objet.

 
-
    
-

-
-
Compatibilité des navigateurs

+
Compatibilité des navigateurs

 
 
{{Compat("api.Element.getBoundingClientRect")}}

 
-
Voir aussi

+
Voir aussi

 
 
    
  
  • {{domxref("Element.getClientRects", "getClientRects()")}}
    • 
-- 
cgit v1.2.3-54-g00ecf



  
   

    SpécificationÉtatCommentairesStatutCommentaire