From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- .../intersectionrect/index.md | 62 ++++++++++------------ 1 file changed, 27 insertions(+), 35 deletions(-) (limited to 'files/fr/web/api/performanceelementtiming/intersectionrect') diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md index 4954876475..a430ef9821 100644 --- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md +++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md @@ -10,57 +10,49 @@ tags: - PerformanceElementTiming translation_of: Web/API/PerformanceElementTiming/intersectionRect --- -
{{APIRef("Element Timing API")}}
+{{APIRef("Element Timing API")}} -

La propriété en lecture seule intersectionRect de l'interface PerformanceElementTiming renvoie le rectangle de l'élément dans la zone d'affichage (viewport).

+La propriété en lecture seule **`intersectionRect`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie le rectangle de l'élément dans la zone d'affichage (_viewport_). -

Syntaxe

+## Syntaxe -
var rect = PerformanceElementTiming.intersectionRect;
+```js +var rect = PerformanceElementTiming.intersectionRect; +``` -

Valeur

-

Un objet DOMRectReadOnly qui est le rectangle de l'élément dans la zone d'affichage.

+### Valeur -

Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.

+Un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) qui est le rectangle de l'élément dans la zone d'affichage. -

Exemples

+Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément. -

Dans cet exemple, l'appel à entry.intersectionRect renvoie un objet DOMRectReadOnly avec le rectangle d'affichage de l'image.

+## Exemples -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+Dans cet exemple, l'appel à `entry.intersectionRect` renvoie un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) avec le rectangle d'affichage de l'image. -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
+```html
+une belle image
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.intersectionRect);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });
+observer.observe({ entryTypes: ["element"] }); +``` -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}{{Spec2('Element Timing API')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}} | {{Spec2('Element Timing API')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.PerformanceElementTiming.intersectionRect")}}

+{{Compat("api.PerformanceElementTiming.intersectionRect")}} -- cgit v1.2.3-54-g00ecf