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 --- files/fr/web/api/htmlelement/accesskey/index.md | 10 +- .../api/htmlelement/animationend_event/index.md | 113 ++++-------- .../htmlelement/animationiteration_event/index.md | 117 ++++-------- .../api/htmlelement/animationstart_event/index.md | 113 ++++-------- .../web/api/htmlelement/beforeinput_event/index.md | 117 ++++++------ files/fr/web/api/htmlelement/change_event/index.md | 184 +++++++++---------- files/fr/web/api/htmlelement/click/index.md | 115 ++++++------ .../web/api/htmlelement/contenteditable/index.md | 84 ++++----- files/fr/web/api/htmlelement/dir/index.md | 78 ++++---- files/fr/web/api/htmlelement/hidden/index.md | 163 ++++++++--------- files/fr/web/api/htmlelement/index.md | 142 ++++----------- files/fr/web/api/htmlelement/innertext/index.md | 41 ++--- files/fr/web/api/htmlelement/input_event/index.md | 113 ++++-------- .../web/api/htmlelement/iscontenteditable/index.md | 80 ++++----- files/fr/web/api/htmlelement/lang/index.md | 64 +++---- files/fr/web/api/htmlelement/offsetheight/index.md | 51 +++--- files/fr/web/api/htmlelement/offsetleft/index.md | 103 ++++++----- files/fr/web/api/htmlelement/offsetparent/index.md | 29 +-- files/fr/web/api/htmlelement/offsettop/index.md | 40 ++--- files/fr/web/api/htmlelement/offsetwidth/index.md | 37 ++-- files/fr/web/api/htmlelement/outertext/index.md | 30 ++-- files/fr/web/api/htmlelement/title/index.md | 76 +++----- .../api/htmlelement/transitionend_event/index.md | 199 ++++++++------------- 23 files changed, 847 insertions(+), 1252 deletions(-) (limited to 'files/fr/web/api/htmlelement') diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md index e89e767a56..544c9dfd3e 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.md +++ b/files/fr/web/api/htmlelement/accesskey/index.md @@ -12,12 +12,8 @@ translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey original_slug: Web/API/Element/accessKey --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -
 
+La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. -

La propriété Element.accessKey définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

- -
-

Note : La propriété Element.accessKey est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme Alt + accesskey).

-
+> **Note :** La propriété `Element.accessKey`\*\* \*\*est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme Alt + accesskey). diff --git a/files/fr/web/api/htmlelement/animationend_event/index.md b/files/fr/web/api/htmlelement/animationend_event/index.md index 836a817daf..65caf0c965 100644 --- a/files/fr/web/api/htmlelement/animationend_event/index.md +++ b/files/fr/web/api/htmlelement/animationend_event/index.md @@ -4,79 +4,40 @@ slug: Web/API/HTMLElement/animationend_event translation_of: Web/API/HTMLElement/animationend_event original_slug: Web/Events/animationend --- -

L'événement animationend est déclenché quand une animation CSS est terminée.

- -

Informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element, Window
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- - - -

Voir aussi

- - +L'événement `animationend est déclenché quand une animation CSS est terminée.` + +## Informations générales + +- Spécification + - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events) +- Interface + - : AnimationEvent +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : Document, Element, Window +- Action par défaut + - : Aucune + +## Propriétés + +| Propriété | Type | Description | +| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM). | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Est-ce que l'événement se propage? | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Est-il possible d'annuler l'événement? | +| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le nom de la propriété CSS associéee à la transition. | +| `elapsedTime` {{ReadOnlyInline}} | Float | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). | + +## Evénements liés + +- {{Event("animationstart")}} +- {{Event("animationend")}} +- {{Event("animationiteration")}} + +## Voir aussi + +- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations) diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.md b/files/fr/web/api/htmlelement/animationiteration_event/index.md index f0e8c058b7..82a21ad3be 100644 --- a/files/fr/web/api/htmlelement/animationiteration_event/index.md +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.md @@ -4,81 +4,42 @@ slug: Web/API/HTMLElement/animationiteration_event translation_of: Web/API/HTMLElement/animationiteration_event original_slug: Web/Events/animationiteration --- -

L'événement animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.

- -

informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Synchronisme
-
synchronous
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- - - -

Voir aussi

- - +L'événement\*\* \*\*`animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.` + +## informations générales + +- Spécification + - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events) +- Interface + - : AnimationEvent +- Synchronisme + - : synchronous +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : Document, Element +- Action par défaut + - : Aucune + +## Propriétés + +| Propriété | Type | Description | +| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM). | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Est-ce que l'événement se propage? | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Est-il possible d'annuler l'événement? | +| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le nom de la propriété CSS associéee à la transition. | +| `elapsedTime` {{ReadOnlyInline}} | Float | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). | + +## Evénements liés + +- {{Event("animationstart")}} +- {{Event("animationend")}} +- {{Event("animationiteration")}} + +## Voir aussi + +- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations) diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.md b/files/fr/web/api/htmlelement/animationstart_event/index.md index f4dfb8d3cb..84d56e0b9a 100644 --- a/files/fr/web/api/htmlelement/animationstart_event/index.md +++ b/files/fr/web/api/htmlelement/animationstart_event/index.md @@ -4,79 +4,40 @@ slug: Web/API/HTMLElement/animationstart_event translation_of: Web/API/HTMLElement/animationstart_event original_slug: Web/Events/animationstart --- -

L'événement animationstart est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un elapsedTime équivalent à la valeur absolue du délai.

- -

Informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- - - -

Voir aussi

- - +L'événement **`animationstart `**`est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un `_elapsedTime_ équivalent à la valeur absolue du délai. + +## Informations générales + +- Spécification + - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events) +- Interface + - : AnimationEvent +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : Document, Element +- Action par défaut + - : Aucune + +## Propriétés + +| Propriété | Type | Description | +| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM). | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Est-ce que l'événement se propage? | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Est-il possible d'annuler l'événement? | +| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le nom de la propriété CSS associéee à la transition. | +| `elapsedTime` {{ReadOnlyInline}} | Float | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). | + +## Evénements liés + +- {{Event("animationstart")}} +- {{Event("animationend")}} +- {{Event("animationiteration")}} + +## Voir aussi + +- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations) diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index 8d34743cfd..de24c8836e 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -3,90 +3,83 @@ title: 'HTMLElement: beforeinput event' slug: Web/API/HTMLElement/beforeinput_event translation_of: Web/API/HTMLElement/beforeinput_event --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

L’évènement DOM beforeinput est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.

+L’évènement DOM **`beforeinput`** est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé. -

Dans le cas de contenteditable et designMode, la cible de l’évènement est l’hôte d’édition. Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.

+Dans le cas de `contenteditable` et `designMode`, la cible de l’évènement est _l’hôte d’édition._ Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui
Interface{{DOMxRef("InputEvent")}}
Propriété gestionnaire d’évènementAucune
Sync / AsyncSync
ComposéOui
Action par défautMettre à jour l’élément DOM
BouillonneOui
AnnulableOui
Interface{{DOMxRef("InputEvent")}}
Propriété gestionnaire d’évènementAucune
Sync / AsyncSync
ComposéOui
Action par défautMettre à jour l’élément DOM
-

Exemples

+## Exemples -

Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.

+Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée. -

HTML

+### HTML -
<input placeholder="Saisissez du texte" name="name"/>
-<p id="values"></p>
+```html + +

+``` -

JavaScript

+### JavaScript -
const input = document.querySelector('input');
+```js
+const input = document.querySelector('input');
 const log = document.getElementById('values');
 
 input.addEventListener('beforeinput', updateValue);
 
 function updateValue(e) {
   log.textContent = e.target.value;
-}
+} +``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Examples")}}

+{{EmbedLiveSample("Examples")}} -

Spécifications

+## Spécifications - - - - - - - - - - - -
SpécificationStatut
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}{{Spec2('UI Events')}}
+| Spécification | Statut | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | +| {{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}} | {{Spec2('UI Events')}} | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.HTMLElement.beforeinput_event")}}

+{{Compat("api.HTMLElement.beforeinput_event")}} -

Voir aussi

+## Voir aussi - +- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index ba007c779b..9f239a8004 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -11,63 +11,66 @@ tags: - Élément HTML translation_of: Web/API/HTMLElement/change_event --- -

{{APIRef}}

+{{APIRef}} -

L'événement change est déclenché pour les éléments {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) et {{HTMLElement("textarea")}} (zone de texte) lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, change n'est pas nécessairement déclenché pour chaque changement de valeur.

+L'événement **change** est déclenché pour les éléments {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ et {{HTMLElement("textarea")}} _(zone de texte)_ lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, **change** n'est pas nécessairement déclenché pour chaque changement de valeur. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableNon
Interface{{domxref("Event")}}
Gestionnaire d'événements{{domxref("GlobalEventHandlers/onchange", "onchange")}}
PropagationOui
AnnulableNon
Interface{{domxref("Event")}}
Gestionnaire d'événements + {{domxref("GlobalEventHandlers/onchange", "onchange")}} +
-

En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement change se déclenche à un moment différent :

+En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent : - +- Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `` et ``_(case à cocher_). +- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour ``, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour ``, etc.). +- Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou ``). -

Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement change doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du <select> (voir {{bug("126379")}}).

+Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du \` qui doivent déclencher l'événement `change`.](https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply) -

Exemples

+## Exemples -

L'élément <select>

+### L'élément \ + + + + + + -<div class="result"></div> +
+``` - +} +``` -

Javascript

+#### Javascript -
const selectElement = document.querySelector('.ice-cream');
+```js
+const selectElement = document.querySelector('.ice-cream');
 
-selectElement.addEventListener('change', (event) => {
+selectElement.addEventListener('change', (event) => {
   const result = document.querySelector('.result');
   result.textContent = `You like ${event.target.value}`;
-});
+}); +``` -

Résultat

+#### Résultat -

{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }}

+{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }} -

L'élément d'entrée de texte

+### L'élément d'entrée de texte -

Pour certains éléments, notamment <input type="text">, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.

+Pour certains éléments, notamment ``, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement. -

HTML

+#### HTML -
<input placeholder="Enter some text" name="name"/>
-<p id="log"></p>
+```html + +

+``` -

JavaScript

+#### JavaScript -
const input = document.querySelector('input');
+```js
+const input = document.querySelector('input');
 const log = document.getElementById('log');
 
 input.addEventListener('change', updateValue);
 
 function updateValue(e) {
   log.textContent = e.target.value;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}{{Spec2("HTML5 W3C")}}
{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}{{Spec2("DOM2 Events")}}Définition initiale
+} +``` + +#### Résultat + +{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }} -

Compatibilités navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "indices.html#event-change", "change")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}} | {{Spec2("HTML5 W3C")}} | | +| {{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}} | {{Spec2("DOM2 Events")}} | Définition initiale | +## Compatibilités navigateurs -

{{Compat("api.GlobalEventHandlers.onchange")}}

+{{Compat("api.GlobalEventHandlers.onchange")}} -

Voir aussi

+## Voir aussi -

Cet événement est aussi déclenché dans plusieurs API non-standard:

+Cet événement est aussi déclenché dans plusieurs API non-standard: - +- {{domxref("NetworkInformation.connection")}} déclenche l'événement **change** lorsque les informations de connexions changent. +- {{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique. diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md index 4fcce54685..9bd9f6704c 100644 --- a/files/fr/web/api/htmlelement/click/index.md +++ b/files/fr/web/api/htmlelement/click/index.md @@ -6,67 +6,54 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement/click --- -

{{ ApiRef() }}

-

Résumé

-

La méthode click simule un clic sur un élément.

-

Syntaxe

-
element.click()
-

Notes

-

Lorsque la méthode click est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement click de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements click. Cependant, la propagation d'un évènement click ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.

-

Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode click d'Opera sera ignorée silencieusement, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété CSS {{cssxref('display')}} à "none".

-
-

{{gecko_callout_heading("5.0")}}

-

Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode click qu'avec des éléments {{HTMLElement("input")}} de type - - button - , - - checkbox - , - - radio - , - - reset - ou - - submit - . Gecko n'implémentait pas la méthode click sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.

-

Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par HTML5.

-

D'autres implémentations du DOM peuvent se comporter différemment.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — traduction en français (non normative){{Spec2('DOM2 HTML')}} 
- -

Compatibilité des navigateurs

- -p>{{Compat("api.HTMLElement.click")}}

- -

Voir aussi

- - +{{ ApiRef() }} + +## Résumé + +La méthode **click** simule un clic sur un élément. + +## Syntaxe + + element.click() + +## Notes + +Lorsque la méthode `click` est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement `click` de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements `click`. Cependant, la propagation d'un évènement `click` ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu. + +Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode `click` d'Opera **sera ignorée silencieusement**, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété [CSS](/fr/docs/CSS) {{cssxref('display')}} à "none". + +{{gecko_callout_heading("5.0")}} + +Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode `click` qu'avec des éléments {{HTMLElement("input")}} de type +_button_ +, +_checkbox_ +, +_radio_ +, +_reset_ +ou +_submit_ +. Gecko n'implémentait pas la méthode `click` sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments. + +Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par [HTML5](/fr/docs/HTML/HTML5). + +D'autres implémentations du DOM peuvent se comporter différemment. + +## Spécifications + +| Spécification | Statut | Commentaires | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | +| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} |   | + +## Compatibilité des navigateurs + +p>{{Compat("api.HTMLElement.click")}} + +## Voir aussi + +- Gestionnaires d'événements liés + + - {{domxref("GlobalEventHandlers.onclick")}} + - {{domxref("GlobalEventHandlers.ondblclick")}} + - {{domxref("GlobalEventHandlers.onauxclick")}} diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md index ceb68bb2f8..d7115157a2 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.md +++ b/files/fr/web/api/htmlelement/contenteditable/index.md @@ -9,55 +9,35 @@ tags: - contenteditable translation_of: Web/API/HTMLElement/contentEditable --- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété HTMLElement.contentEditable est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :

- - - -

Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.

- -

Syntaxe

- -
editable = element.contentEditable
-element.contentEditable = "true"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Definition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.contentEditable")}}

- -

Dans Internet Explorer, le contentable ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau.

- -

Voir aussi

- - +{{APIRef("HTML DOM")}} + +`La propriété `**`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs : + +- `"true"` _(vrai)_ indique que l'élément est éditable. +- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. +- `"inherit"`  _(hérité)_ indique que l'élément héritera de l'état editable de son parent. + +Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}. + +## Syntaxe + + editable = element.contentEditable + element.contentEditable = "true" + +## Spécifications + +| Specification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}} | {{Spec2('HTML WHATWG')}} | Definition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLElement.contentEditable")}} + +Dans Internet Explorer, le `contentable` ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau. + +## Voir aussi + +- [Contenu editable](/fr/docs/Web/HTML/Contenu_editable) +- {{domxref("HTMLElement.isContentEditable")}} +- L'attribut global [contenteditable](/fr/docs/Web/HTML/Attributs_universels/contenteditable) . diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md index 96848e9935..5cfee0d797 100644 --- a/files/fr/web/api/htmlelement/dir/index.md +++ b/files/fr/web/api/htmlelement/dir/index.md @@ -6,43 +6,45 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement/dir --- -

{{ ApiRef() }}

-

Résumé

-

L'attribut dir obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.

-

Syntaxe et valeurs

-
var DirectionActuelle = referenceElement.dir;
-referenceElement.dir = NouvelleDirection;
-
-

DirectionActuelle est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. NouvelleDirection est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.

-

Les valeurs possibles pour dir sont ltr, pour de gauche à droite (left-to-right), et rtl, pour de droite à gauche (right-to-left).

-

Exemple

-
var para = document.getElementById("para1");
+{{ ApiRef() }}
+
+## Résumé
+
+L'attribut **`dir`** obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.
+
+## Syntaxe et valeurs
+
+```js
+var DirectionActuelle = referenceElement.dir;
+referenceElement.dir = NouvelleDirection;
+```
+
+_DirectionActuelle_ est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. _NouvelleDirection_ est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.
+
+Les valeurs possibles pour **`dir`** sont **`ltr`**, pour de gauche à droite (_left-to-right_), et **`rtl`**, pour de droite à gauche (_right-to-left_).
+
+## Exemple
+
+```js
+var para = document.getElementById("para1");
 para.dir = "rtl";
 // change la direction du texte sur un paragraphe identifié par "para1"
-
-

Notes

-

La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).

-

Une image peut avoir sont attribut dir positionné à « rtl », auquel cas les attributs title et alt seront formatés et définis comme allant de droite à gauche.

-

Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.

-
-

{{ gecko_callout_heading("7.0") }}

-

Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.

-
-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — traduction (non normative){{Spec2('DOM2 HTML')}} 
-

 

+``` + +## Notes + +La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche). + +Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. + +Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. + +{{ gecko_callout_heading("7.0") }} + +Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification. + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | +| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} |   | diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index f54affe844..8cbd7090df 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -3,86 +3,87 @@ title: HTMLElement.hidden slug: Web/API/HTMLElement/hidden translation_of: Web/API/HTMLElement/hidden --- -
{{ APIRef("HTML DOM") }}
+{{ APIRef("HTML DOM") }} -

La propriété hidden de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut true si l'élément est caché, sinon sa valeur est false. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.

+La propriété **`hidden`** de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut `true` si l'élément est caché, sinon sa valeur est `false`. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément. -

La propriété hidden s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.

+La propriété `hidden` s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur. -

Des cas d'utilisation appropriés de hidden comprennent :

+Des cas d'utilisation appropriés de `hidden` comprennent : - +- du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ; +- du contenu qui était nécessaire antérieurement mais qui ne l'est plus ; +- du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ; +- la création d'un canevas hors écran comme tampon de dessin. -

Des cas inappropriés d'utilisation comprennent :

+Des cas inappropriés d'utilisation comprennent : - +- le fait de cacher des panneaux dans une boîte de dialogue à onglets ; +- le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres. -
-

Note : Des éléments qui ne sont pas hidden ne doivent pas faire référence à des éléments qui le sont.

-
+> **Note :** Des éléments qui ne sont pas `hidden` ne doivent pas faire référence à des éléments qui le sont. -

Syntaxe

+## Syntaxe -
estCaché = HTMLElement.hidden;
+    estCaché = HTMLElement.hidden;
 
-HTMLElement.hidden = true | false;
+ HTMLElement.hidden = true | false; -

Valeur

+### Valeur -

Un Boolean qui est true si l'élément est caché à la vue ; sinon, la valeur est false.

+Un Boolean qui est `true` si l'élément est caché à la vue ; sinon, la valeur est `false`. -

Exemple

+## Exemple -

Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.

+Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle. -

JavaScript

+### JavaScript -
document.getElementById("boutonOk")
+```js
+document.getElementById("boutonOk")
         .addEventListener("click", function() {
   document.getElementById("bienvenue").hidden = true;
   document.getElementById("impressionnant").hidden = false;
-}, false);
+}, false); +``` -

Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.

+Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place. -

HTML

+### HTML -

Le code HTML pour les deux boîtes est montré ci-dessous.

+Le code HTML pour les deux boîtes est montré ci-dessous. -

Le panneau bienvenue

+#### Le panneau bienvenue -
<div id="bienvenue" class="panneau">
-  <h1>Bienvenue à Machin.com !</h1>
-  <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>
-  <button class="bouton" id="boutonOk">OK</button>
-</div>
+```html +
+

Bienvenue à Machin.com !

+

En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !

+ +
+``` -

Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.

+Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK. -

Le panneau de suite

+#### Le panneau de suite -

Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour hidden. Le panneau de suite ressemble à ce qui suit en HTML:

+Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour `hidden`. Le panneau de suite ressemble à ce qui suit en HTML: -
<div id="impressionnant" class="panneau" hidden>
-  <h1>Merci !</h1>
-  <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
+```html
+
+ d'une façon impressionnante pour rendre le monde plus impressionnant !

+ +``` -

CSS

+### CSS -

Le contenu est mis en forme en utilisant le CSS ci-dessous.

+Le contenu est mis en forme en utilisant le CSS ci-dessous. -
.panneau {
+```css
+.panneau {
   font: 16px "Open Sans", Helvetica, Arial, sans-serif;
   border: 1px solid #22d;
   padding: 12px;
@@ -98,46 +99,26 @@ translation_of: Web/API/HTMLElement/hidden
 h1 {
   margin-top: 0;
   font-size: 175%;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Example', 560, 200) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.hidden")}}

- -

Voir aussi

- - +} +``` + +### Résultat + +{{ EmbedLiveSample('Example', 560, 200) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}} | {{Spec2('HTML5 W3C')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLElement.hidden")}} + +## Voir aussi + +- {{domxref("Element.hidden")}} +- {{cssxref("display")}} diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md index 5b5276f04e..77f521cae9 100644 --- a/files/fr/web/api/htmlelement/index.md +++ b/files/fr/web/api/htmlelement/index.md @@ -6,113 +6,43 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement --- -
- {{ApiRef}}
-

Interface des éléments HTML

-

HTMLElement est une interface abstraite pour le DOM, héritée par tous les éléments HTML.

-

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}La touche de navigation clavier assignée à l'élément.
{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}Une chaîne de caractères définissant la touche de navigation clavier assignée.
{{domxref("element.className", "className")}}{{domxref("DOMString")}}Le nom de la classe CSS définie pour l'élément.
{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}{{domxref("DOMStringMap")}}Un tableau associatif des attributs  data-* de l'élément.
{{domxref("element.dir", "dir")}}{{domxref("DOMString")}}L'attribut dir de l'élément.
{{domxref("element.id", "id")}}{{domxref("DOMString")}}L'ID de l'élément.
{{domxref("element.lang", "lang")}}{{domxref("DOMString")}}L'attribut  lang de l'élément.
{{domxref("element.title", "title")}}{{domxref("DOMString")}}L'attribut title de l'élément.
-

Méthodes

- - - - - - - - - - - - - - - - - - - - - - - - - -
Nom et paramètresRenvoieDescription
{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}voidRetire le focus clavier de l'élément actuellement sélectionné.
{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}voidEnvoie un évènement click à l'élément.
{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}voidPlace le focus clavier sur l'élément.
-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}} 
+{{ApiRef}} -

Compatibilité des navigateurs

+## Interface des éléments HTML -

{{Compat("api.HTMLElement")}}

+`HTMLElement` est une interface abstraite pour le [DOM](/fr/docs/DOM), héritée par tous les éléments HTML. -

Voir aussi

+## Propriétés - +| Nom | Type | Description | +| --------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------ | +| {{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | La touche de navigation clavier assignée à l'élément. | +| {{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | Une chaîne de caractères définissant la touche de navigation clavier assignée. | +| {{domxref("element.className", "className")}} | {{domxref("DOMString")}} | Le nom de la classe [CSS](/fr/docs/CSS) définie pour l'élément. | +| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs  `data-*` de l'élément. | +| {{domxref("element.dir", "dir")}} | {{domxref("DOMString")}} | L'attribut `dir` de l'élément. | +| {{domxref("element.id", "id")}} | {{domxref("DOMString")}} | L'ID de l'élément. | +| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut  `lang` de l'élément. | +| {{domxref("element.title", "title")}} | {{domxref("DOMString")}} | L'attribut `title` de l'élément. | + +## Méthodes + +| Nom et paramètres | Renvoie | Description | +| ----------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------- | +| {{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}} | `void` | Retire le focus clavier de l'élément actuellement sélectionné. | +| {{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}} | `void` | Envoie un évènement `click` à l'élément. | +| {{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}} | `void` | Place le focus clavier sur l'élément. | + +## Spécification + +| Spécification | Statut | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.HTMLElement")}} + +## Voir aussi + +- {{domxref("Element")}} diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md index e49115801b..3f639cd672 100644 --- a/files/fr/web/api/htmlelement/innertext/index.md +++ b/files/fr/web/api/htmlelement/innertext/index.md @@ -4,40 +4,25 @@ slug: Web/API/HTMLElement/innerText translation_of: Web/API/HTMLElement/innerText original_slug: Web/API/Node/innerText --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Sommaire

+## Sommaire -

Node.innerText est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.

+**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. -

{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.

+{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux. -

Spécification

+## Spécification - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduction basée sur le brouillon de spécification de innerText. Voir whatwg/html#465 et whatwg/compat#5 pour l’histoire.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}} | {{Spec2('HTML WHATWG')}} | Introduction basée sur le [brouillon de spécification de innerText](https://github.com/rocallahan/innerText-spec). Voir [whatwg/html#465](https://github.com/whatwg/html/issues/465) et [whatwg/compat#5](https://github.com/whatwg/compat/issues/5) pour l’histoire. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs +{{Compat("api.Node.innerText")}} +## Voir aussi -

{{Compat("api.Node.innerText")}}

- -

Voir aussi

- - +- {{domxref("HTMLElement.outerText")}} +- {{domxref("Element.innerHTML")}} diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md index 1e5ed92105..d70e1d9447 100644 --- a/files/fr/web/api/htmlelement/input_event/index.md +++ b/files/fr/web/api/htmlelement/input_event/index.md @@ -8,93 +8,50 @@ tags: - HTML5 translation_of: Web/API/HTMLElement/input_event --- -

L'évènement DOM input (entrée) est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) ou {{ HTMLElement("textarea") }} (zone de texte) est modifiée. (Pour les éléments input avec type=checkbox (case à cocher) ou type=radio , l'évènement input  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).

+L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input`  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). -

De plus, l'évènement  input se déclenche sur les éditeurs contenteditable quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" (hôte de l'édition) . S'il y a deux éléments ou plus qui ont contenteditable à true (vrai), "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs designMode .

+De plus, l'évènement  `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) . -

Information générale

+## Information générale -
-
Spécification
-
HTML5, DOM Level 3 Events
-
Interface
-
{{domxref("Event")}}, {{domxref("InputEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Élement
-
Action par défaut
-
La valeur ou le contenu est modifié
-
+- Spécification + - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input), [DOM Level 3 Events](https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input) +- Interface + - : {{domxref("Event")}}, {{domxref("InputEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : Élement +- Action par défaut + - : La valeur ou le contenu est modifié -

 

-

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+## Propriétés -

Spécifications

+| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+## Spécifications -

Compatibilité des navigateurs

+| Spécification | Statut | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('DOM3 Events', "#event-type-input", "input event")}} | {{Spec2('DOM3 Events')}} | -

{{Compat("api.HTMLElement.input_event")}}

+## Compatibilité des navigateurs -

Voir aussi

+{{Compat("api.HTMLElement.input_event")}} - +## Voir aussi + +- {{event("keydown")}} +- {{event("keyup")}} +- {{event("keypress")}} +- {{event("input")}} diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index dd7c704998..717a7f65e0 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -10,70 +10,50 @@ tags: - Élément HTML translation_of: Web/API/HTMLElement/isContentEditable --- -
-
{{ APIRef("HTML DOM") }}
-
+{{ APIRef("HTML DOM") }} -

La propriété en lecture seule HTMLElement.isContentEditable renvoie un  {{jsxref("Boolean")}} qui est true (vrai) si le contenu de l'élément est éditable ; sinon elle renvoie false(faux).

+La propriété en lecture seule **`HTMLElement.isContentEditable`** renvoie un  {{jsxref("Boolean")}} qui est `true `_(vrai)_ si le contenu de l'élément est éditable ; sinon elle renvoie `false`_(faux)_. -

Syntaxe

+## Syntaxe -
editable = element.isContentEditable
-
+ editable = element.isContentEditable -

Exemple

+## Exemple -

JavaScript

+### JavaScript -
document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
-document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
+```js +document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable; +document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable; +``` -

HTML

+### HTML -
<p id="myText1">Uneditable Paragraph</p>
-<p id="myText2" contentEditable="true">Editable Paragraph</p>
+```html
+
Uneditable Paragraph

+
Editable Paragraph

 
-<p id="infoText1">Can edit the first paragraph? </p>
-<p id="infoText2">Can edit the second paragraph? </p>
+

Can edit the first paragraph?

+

Can edit the second paragraph?

+``` -

Résultat

+### Résultat -

{{ EmbedLiveSample('Example') }}

+{{ EmbedLiveSample('Example') }} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML WHATWG')}}Pas de changement de la dernière image, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5.1')}}L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5 W3C')}}Image de  {{SpecName('HTML WHATWG')}},  definition initiale.
+| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de la dernière image, {{SpecName('HTML5.1')}} | +| {{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5.1')}} | L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}} | +| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de  {{SpecName('HTML WHATWG')}},  definition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.HTMLElement.isContentEditable")}}

+{{Compat("api.HTMLElement.isContentEditable")}} -

Voir aussi

+## Voir aussi - +- {{domxref("element.contentEditable")}} +- L'attribut global [contenteditable](/en-US/docs/Web/HTML/Global_attributes/contenteditable). diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md index 15d2f5536f..3d17dce396 100644 --- a/files/fr/web/api/htmlelement/lang/index.md +++ b/files/fr/web/api/htmlelement/lang/index.md @@ -6,41 +6,41 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement/lang --- -

{{ ApiRef() }}

-

Résumé

-

Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.

-

Syntaxe et valeurs

-
var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
-référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
-
-

langueUtilisee est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. NouvelleLangue est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.

-

Exemple

-
// ce bout de code compare la langue de base et
+{{ ApiRef() }}
+
+## Résumé
+
+Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.
+
+## Syntaxe et valeurs
+
+```js
+var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
+```
+
+_langueUtilisee_ est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. _NouvelleLangue_ est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.
+
+## Exemple
+
+```js
+// ce bout de code compare la langue de base et
 // redirige vers une autre URL suivant la langue
 if (document.documentElement.lang === "en") {
     window.location.href = "un_document.html.en";
 } else if(document.documentElement.lang === "ru") {
     window.location.href = "un_document.html.ru";
 }
-
-

Notes

-

Les codes de langues renvoyés par cette propriété sont définis dans la RFC 1766. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est unknown (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.

-

Ne marche qu'avec l'attribut lang, et non avec xml:lang.

-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}{{Spec2('DOM2 HTML')}} 
-

 

+``` + +## Notes + +Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document. + +Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. + +## Spécification + +| Spécification | Statut | Commentaires | +| ---------------------------------------------------------------------------- | ---------------------------- | ------------ | +| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} |   | diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md index 5ceee19bcc..9ea5546329 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.md +++ b/files/fr/web/api/htmlelement/offsetheight/index.md @@ -5,50 +5,45 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement/offsetHeight --- -

{{ ApiRef() }}

+{{ ApiRef() }} -

Résumé

+### Résumé -

Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

+Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page. -

Syntaxe

+### Syntaxe -
var hauteurTotaleElem = document.getElementById(id).offsetHeight;
-
+ var hauteurTotaleElem = document.getElementById(id).offsetHeight; -

hauteurTotalElem est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par id. offsetHeight est une propriété en lecture seule.

+_hauteurTotalElem_ est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par `id`. `offsetHeight` est une propriété en lecture seule. -

Description

+### Description -

Typiquement, la propriété offsetHeight d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.

+Typiquement, la propriété **offsetHeight** d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément. -

Exemple

+### Exemple -

Example

+## Example -

+![](dimensions-offset.png) -

L'exemple d'image ci-avant montre une barre de défilement et un décalage offsetHeight qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs offsetHeight élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de scrollTop pour le conteneur.

+L'exemple d'image ci-avant montre une barre de défilement et un décalage `offsetHeight` qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs `offsetHeight` élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de `scrollTop` pour le conteneur. -

Spécification

+### Spécification -

offsetHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

+`offsetHeight` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C. -

Notes

+### Notes -

offsetHeight est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).

+`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte). -

Références

+### Références - +- [_offsetHeight definition_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true) +- [_Measuring Element Dimension and Location_ sur MSDN](http://msdn.microsoft.com/workshop/author/om/measuring.asp) -

Voir aussi

+### Voir aussi - \ No newline at end of file +- [`element.clientHeight`](/fr/DOM/element.clientHeight) +- [`element.scrollHeight`](/fr/DOM/element.scrollHeight) +- [`element.offsetWidth`](/fr/DOM/element.offsetWidth) diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md index f4bf76cb37..f6cdd9c10d 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.md +++ b/files/fr/web/api/htmlelement/offsetleft/index.md @@ -5,53 +5,68 @@ tags: - Référence_du_DOM_Gecko translation_of: Web/API/HTMLElement/offsetLeft --- -

{{ ApiRef() }}

-

Résumé

-

Renvoie le nombre de pixels dont le - - coin supérieur gauche - de l'élément courant est décalé vers là gauche au sein du nœud offsetParent.

-

Syntaxe

-
left =element.offsetLeft;
-
-

left est un entier représentant le décalage vers la gauche en pixels.

-

Note

-

offsetLeft renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments span dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété offsetLeft fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à offsetLeft, offsetTop, offsetWidth et offsetHeight ne contiendra pas forcément un span avec débordement de texte.

-

Exemple

-
var colorTable = document.getElementById("t1");
-var tOLeft = colorTable.offsetLeft;
-
-if (tOLeft > 5) {
-  // grand décalage à gauche : faire quelque chose ici
-}
-
-

Exemple

-

Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.

- -

- -

Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.

-
<div style="width: 300px; border-color:blue;
-  border-style:solid; border-width:1;">
-  <span>Short span. </span>
-  <span id="long">Long span that wraps withing this div.</span>
-</div>
-
-<div id="box" style="position: absolute; border-color: red;
-  border-width: 1; border-style: solid; z-index: 10">
-</div>
-
-<script>
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie le nombre de pixels dont le
+_coin supérieur gauche_
+de l'élément courant est décalé vers là gauche au sein du nœud [`offsetParent`](fr/DOM/element.offsetParent).
+
+### Syntaxe
+
+    left =element.offsetLeft;
+
+`left` est un entier représentant le décalage vers la gauche en pixels.
+
+### Note
+
+`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte.
+
+### Exemple
+
+    var colorTable = document.getElementById("t1");
+    var tOLeft = colorTable.offsetLeft;
+
+    if (tOLeft > 5) {
+      // grand décalage à gauche : faire quelque chose ici
+    }
+
+### Exemple
+
+Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.
+
+![](offsetleft.jpg)
+
+Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.
+
+```html
+

+  Short span. 
+  Long span that wraps withing this div.
+

+
+

+

+
+
+```
+
+### Voir aussi
+
+[`offsetParent`](fr/DOM/element.offsetParent), [`offsetTop`](fr/DOM/element.offsetTop), [`offsetWidth`](fr/DOM/element.offsetWidth), [`offsetHeight`](fr/DOM/element.offsetHeight)
+
+### Spécification
+
+Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.
+
+[MSDN: offsetLeft](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp)
diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md
index 4f3775191e..93a25485bf 100644
--- a/files/fr/web/api/htmlelement/offsetparent/index.md
+++ b/files/fr/web/api/htmlelement/offsetparent/index.md
@@ -7,15 +7,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/offsetParent
 ---
-
{{ ApiRef() }}

-
Résumé

-
Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'offsetParent.

-
Syntaxe

-
objetParent = element.offsetParent
-

-
Paramètres

-
-
Spécification

-
{{ DOM0() }}

\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**.
+
+### Syntaxe
+
+    objetParent = element.offsetParent
+
+### Paramètres
+
+- `objetParent` est une référence à l'élément dans lequel l'élément courant est positionné.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/htmlelement/offsettop/index.md b/files/fr/web/api/htmlelement/offsettop/index.md
index 44e3b80d2c..68c4330e6f 100644
--- a/files/fr/web/api/htmlelement/offsettop/index.md
+++ b/files/fr/web/api/htmlelement/offsettop/index.md
@@ -6,41 +6,37 @@ tags:
   - DOM_0
 translation_of: Web/API/HTMLElement/offsetTop
 ---
-
{{ ApiRef() }}

+{{ ApiRef() }}
 
-
Résumé

+### Résumé
 
-
offsetTop renvoie la distance entre l'élément courant et le haut du nœud offsetParent.

+**offsetTop** renvoie la distance entre l'élément courant et le haut du nœud [`offsetParent`](/fr/docs/DOM/element.offsetParent).
 
-
Syntaxe

+### Syntaxe
 
-
topPos = element.offsetTop;
-

+    topPos = element.offsetTop;
 
-
Paramètres

+### Paramètres
 
-
+- `topPos` est le nombre de pixels depuis le haut de l'élément parent.
 
-
Exemple

+### Exemple
 
-
d = document.getElementById("div1");
+    d = document.getElementById("div1");
 
-topPos = d.offsetTop;
+    topPos = d.offsetTop;
 
-if (topPos > 10 ) {
+    if (topPos > 10 ) {
 
-    // l'objet est décalé de plus de
-    // 10 pixels par rapport à son parent
+        // l'objet est décalé de plus de
+        // 10 pixels par rapport à son parent
 
-}
-

+    }
 
-
Spécification

+### Spécification
 
-
{{ DOM0() }}

+{{ DOM0() }}
 
-
Références

+### Références
 
-
offsetTop definition sur MSDN

\ No newline at end of file
+[_offsetTop definition_ sur MSDN](http://msdn2.microsoft.com/en-us/library/ms534303.aspx)
diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md
index a957ef38e9..66bde2526f 100644
--- a/files/fr/web/api/htmlelement/offsetwidth/index.md
+++ b/files/fr/web/api/htmlelement/offsetwidth/index.md
@@ -3,38 +3,35 @@ title: element.offsetWidth
 slug: Web/API/HTMLElement/offsetWidth
 translation_of: Web/API/HTMLElement/offsetWidth
 ---
-
{{ ApiRef() }}

+{{ ApiRef() }}
 
-
Résumé

+### Résumé
 
-
Renvoie la largeur totale d'un élément.

+Renvoie la largeur totale d'un élément.
 
-
Syntaxe

+### Syntaxe
 
-
var offsetWidth = element.offsetWidth;
-

+    var offsetWidth = element.offsetWidth;
 
-
offsetWidth est une propriété en lecture seule.

+`offsetWidth` est une propriété en lecture seule.
 
-
Description

+### Description
 
-
Typiquement, l'attribut offsetWidth est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.

+Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.
 
-
Exemple

+## Exemple
 
-

+![](dimensions-offset.png)
 
-
Spécification

+### Spécification
 
-
offsetWidth fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

+`offsetWidth` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-
Notes

+### Notes
 
-
offsetWidth est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).

+`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).
 
-
Références

+### Références
 
-
\ No newline at end of file
+- [_offsetWidth definition_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true)
+- [_Measuring Element Dimension and Location_ sur MSDN](http://msdn.microsoft.com/workshop/author/om/measuring.asp)
diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md
index fb0464c439..fc7fe6a2eb 100644
--- a/files/fr/web/api/htmlelement/outertext/index.md
+++ b/files/fr/web/api/htmlelement/outertext/index.md
@@ -7,31 +7,29 @@ tags:
   - Propriété
 translation_of: Web/API/HTMLElement/outerText
 ---
-
{{APIRef("DOM")}}

+{{APIRef("DOM")}}
 
-
{{ Non-standard_header() }}

+{{ Non-standard_header() }}
 
-
Résumé

+## Résumé
 
-
HTMLElement.outerText n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.

+**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.
 
-
Exemple

+## Exemple
 
-
Voir cette réponse proposée sur StackOverflow.

+Voir [cette réponse proposée sur StackOverflow](http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435).
 
-
Spécification

+## Spécification
 
-
Ne fait partie d'aucune spécification. Discussion de la norme : whatwg/html#668.

+Ne fait partie d'aucune spécification. Discussion de la norme : [whatwg/html#668](https://github.com/whatwg/html/issues/668).
 
-
Microsoft en a publié une description sur MSDN.

+Microsoft en a publié [une description sur MSDN]().
 
-
Compatibilité des navigateurs

+## Compatibilité des navigateurs
 
-
{{Compat("api.HTMLElement.outerText")}}

+{{Compat("api.HTMLElement.outerText")}}
 
-
Voir aussi

+## Voir aussi
 
-
    
- 
  • {{domxref("Node.innerText")}}
    • 
- 
  • {{domxref("Element.outerHTML")}}
    • 
-

+- {{domxref("Node.innerText")}}
+- {{domxref("Element.outerHTML")}}
diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md
index 6c545982d7..4746016d01 100644
--- a/files/fr/web/api/htmlelement/title/index.md
+++ b/files/fr/web/api/htmlelement/title/index.md
@@ -9,66 +9,40 @@ tags:
   - Reference
 translation_of: Web/API/HTMLElement/title
 ---
-
{{ APIRef("HTML DOM") }}

+{{ APIRef("HTML DOM") }}
 
-
La propriété HTMLElement.title représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.

+La propriété **`HTMLElement.title`** représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.
 
-

-
Note : Si un nœud n'a pas d'attribut title, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..

+> **Note :** Si un nœud n'a pas d'attribut `title`, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..
+>
+>      

+>        
le survol de la souris ici fera apparaître "InfoCool"

+>        
le survol de la souris ici ne fera rien apparaître

+>      

 
-
 <div title="InfoCool">
-   <div title="">le survol de la souris ici fera apparaître "InfoCool"</div>
-   <div title=" ">le survol de la souris ici ne fera rien apparaître</div>
- </div>
-

-

+## Syntaxe
 
-
Syntaxe

+    var chn = element.title;
+    element.title = chn;
 
-
var chn = element.title;
-element.title = chn;
-

+## Exemple
 
-
Exemple

+```js
+ bouton1.title = "cliquer pour rafraîchir";
+```
 
-
 bouton1.title = "cliquer pour rafraîchir";
-

+## Spécifications
 
-
Spécifications

+| Spécification                                                                        | Statut                           | Commentaire                                                          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#dom-title', 'title')}}                 | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}     | {{Spec2('DOM2 HTML')}}     | Pas de changement par rapport à la {{SpecName('DOM1')}}.     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                 |
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-title', 'title')}}{{Spec2('HTML WHATWG')}}Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à la {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}{{Spec2('DOM1')}}Définition initiale.

+## Compatibilité des navigateurs
 
-
Compatibilité des navigateurs

+{{Compat("api.HTMLElement.title")}}
 
-
{{Compat("api.HTMLElement.title")}}

+## Voir aussi
 
-
Voir aussi

-
-
    
- 
  • L'attribut HTML global title.
    • 
-

+- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title).
diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md
index a780a3023b..2ab87e6a9e 100644
--- a/files/fr/web/api/htmlelement/transitionend_event/index.md
+++ b/files/fr/web/api/htmlelement/transitionend_event/index.md
@@ -11,108 +11,80 @@ tags:
 translation_of: Web/API/HTMLElement/transitionend_event
 original_slug: Web/Events/transitionend
 ---
-
{{APIRef}}

+{{APIRef}}
 
-
L'événement transitionend est déclenché lorsqu'une transition CSS est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur none, alors l'événement ne pourra pas être généré.

+L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/en-US/docs/CSS/Using_CSS_transitions) est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur `none`, alors l'événement ne pourra pas être généré.
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
BullesOui
AnnulableOui
Interface{{domxref("TransitionEvent")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
BullesOui
AnnulableOui
Interface{{domxref("TransitionEvent")}}
Propriété de gestionnaire d'événements
+        {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+      

 

 
-
L'événement transitionend est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement transitioncancel est déclenché, l'événement transitionend ne se déclenchera pas.

-
-
Propriétés

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
PropriétésTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).

+L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas.
+
+## Propriétés
+
+| Propriétés                               | Type                                 | Description                                                                                                                                                                                                                                                                                                |
+| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                                                                                                                                                                                                                                     |
+| `type` {{readonlyInline}}          | {{domxref("DOMString")}}     | The type of event.                                                                                                                                                                                                                                                                                         |
+| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                                                                                                                                                                                                                                 |
+| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                                                                                                                                                                                                                                   |
+| `propertyName` {{readonlyInline}}  | {{domxref("DOMString")}}     | The name of the CSS property associated with the transition.                                                                                                                                                                                                                                               |
+| `elapsedTime` {{readonlyInline}}   | Float                                | The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of `transition-delay`.                                                                                                                                     |
+| `pseudoElement` {{readonlyInline}} | {{domxref("DOMString")}}     | The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |
 
-
Examples

+## Examples
 
-
This code gets an element that has a transition defined and adds a listener to the transitionend event:

+This code gets an element that has a transition defined and adds a listener to the `transitionend` event:
 
-
const transition = document.querySelector('.transition');
+```js
+const transition = document.querySelector('.transition');
 
-transition.addEventListener('transitionend', () => {
+transition.addEventListener('transitionend', () => {
   console.log('Transition ended');
-});

+});
+```
 
-
The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:

+The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:
 
-
const transition = document.querySelector('.transition');
+```js
+const transition = document.querySelector('.transition');
 
-transition.ontransitionend = () => {
+transition.ontransitionend = () => {
   console.log('Transition ended');
-};

+};
+```
 
-
Live example

+### Live example
 
-
In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:

+In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:
 
-
<div class="transition">Hover over me</div>
-<div class="message"></div>

+```html
+
Hover over me

+

+```
 
-
.transition {
+```css
+.transition {
   width: 100px;
   height: 100px;
   background: rgba(255,0,0,1);
@@ -124,11 +96,13 @@ transition.ontransitionend = () => {
 .transition:hover {
   transform: rotate(90deg);
   background: rgba(255,0,0,0);
-}

+}
+```
 
-
To this, we'll add some JavaScript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.

+To this, we'll add some JavaScript to indicate that the [`transitionstart`](/en-US/docs/Web/API/HTMLElement/transitionstart_event), [`transitionrun`](/en-US/docs/Web/API/HTMLElement/transitionrun_event), [`transitioncancel`](/en-US/docs/Web/API/Window/transitioncancel_event) and `transitionend` events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.
 
-
const message = document.querySelector('.message');
+```js
+const message = document.querySelector('.message');
 const el = document.querySelector('.transition');
 
 el.addEventListener('transitionrun', function() {
@@ -146,46 +120,31 @@ el.addEventListener('transitioncancel', function() {
 el.addEventListener('transitionend', function() {
   message.textContent = 'transitionend fired';
 });
-

+```
 
-
{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+{{ EmbedLiveSample('Live_example', '100%', '150px') }}
 
-
The transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

+The `transitionend` event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.
 
-
If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

+If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
 
-
If the transitioncancel event is fired, the transitionend event will not fire.

+If the `transitioncancel` event is fired, the `transitionend` event will not fire.
 
-
Spécifications

+## Spécifications
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.

+| Spécification                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-
Compatibilité des navigateurs

+## Compatibilité des navigateurs
 
-
{{Compat("api.HTMLElement.transitionend_event")}}

+{{Compat("api.HTMLElement.transitionend_event")}}
 
-
Voir également

+## Voir également
 
-
    
- 
  • Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}
    • 
- 
  • L'interface {{domxref("TransitionEvent")}}
    • 
- 
  • Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
    • 
- 
  • Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
    • 
- 
  • Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}
    • 
- 
  • Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}
    • 
-

+- Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}
+- L'interface {{domxref("TransitionEvent")}}
+- Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
+- Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
+- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}
+- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}
-- 
cgit v1.2.3-54-g00ecf