blob: 028dfae968e58a3551cb0041c0bd03fdbe75dacf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
---
title: IntersectionObserverEntry.target
slug: Web/API/IntersectionObserverEntry/target
tags:
- API
- Intersection Observer
- IntersectionObserver
- Propriété
- target
translation_of: Web/API/IntersectionObserverEntry/target
---
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
La propriété en lecture seule **`target`** de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.
## Syntaxe
var target = IntersectionObserverEntry.target;
### Valeur
La propriété `target` de l'`IntersectionObserverEntry` spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.
## Exemple
Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.
```js
function intersectionCallback(entries) {
entries.forEach(function(entry) {
entry.target.opacity = entry.intersectionRatio;
});
}
```
Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.
Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.
## Spécifications
| Spécification | Statut | Commentaire |
| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
| {{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}} | {{Spec2('IntersectionObserver')}} | Définition initiale |
## Compatibilité des navigateurs
{{Compat("api.IntersectionObserverEntry.target")}}
|
