diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/htmlelement | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/htmlelement')
23 files changed, 847 insertions, 1252 deletions
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 --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<div> </div> +La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. -<p>La propriété <strong>Element.accessKey</strong> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p> - -<div class="note"> -<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>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 <kbd>Alt</kbd> + accesskey).</p> -</div> +> **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 <kbd>Alt</kbd> + 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 --- -<p>L'événement <code><strong>animationend</strong> est déclenché quand une animation CSS est terminée.</code></p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Document, Element, Window</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-ce que l'événement se propage?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-il possible d'annuler l'événement?</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le nom de la propriété CSS associéee à la transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td>Float</td> - <td>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 <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td> - </tr> - </tbody> -</table> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationend")}}</li> - <li>{{Event("animationiteration")}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> -</ul> +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 --- -<p>L'événement<strong> </strong><code><strong> animationiteration</strong> est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec <em>animation-iteration-count</em> valant 1.</code></p> - -<h2 id="informations_générales">informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt> - <dd style="margin: 0 0 0 120px;">synchronous</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-ce que l'événement se propage?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-il possible d'annuler l'événement?</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le nom de la propriété CSS associéee à la transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td>Float</td> - <td>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 <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td> - </tr> - </tbody> -</table> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationend")}}</li> - <li>{{Event("animationiteration")}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> -</ul> +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 --- -<p>L'événement <strong><code>animationstart </code></strong><code>est déclenché quand une animation CSS a commencé. Si <em>animation-delay</em> 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 </code><em>elapsedTime </em>équivalent à la valeur absolue du délai.</p> - -<h2 id="Informations_générales">Informations générales</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> -</dl> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le type de l'événement.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-ce que l'événement se propage?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Est-il possible d'annuler l'événement?</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le nom de la propriété CSS associéee à la transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td>Float</td> - <td>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 <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td> - </tr> - </tbody> -</table> - -<h2 id="Evénements_liés">Evénements liés</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationend")}}</li> - <li>{{Event("animationiteration")}}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> -</ul> +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 --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>L’évènement DOM <strong><code>beforeinput</code></strong> 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é.</p> +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é. -<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> 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.</p> +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. <table class="properties"> - <tbody> - <tr> - <th>Bouillonne</th> - <td>Oui</td> - </tr> - <tr> - <th>Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th>Interface</th> - <td>{{DOMxRef("InputEvent")}}</td> - </tr> - <tr> - <th>Propriété gestionnaire d’évènement</th> - <td>Aucune</td> - </tr> - <tr> - <th>Sync / Async</th> - <td>Sync</td> - </tr> - <tr> - <th>Composé</th> - <td>Oui</td> - </tr> - <tr> - <th>Action par défaut</th> - <td>Mettre à jour l’élément DOM</td> - </tr> - </tbody> + <tbody> + <tr> + <th>Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{DOMxRef("InputEvent")}}</td> + </tr> + <tr> + <th>Propriété gestionnaire d’évènement</th> + <td>Aucune</td> + </tr> + <tr> + <th>Sync / Async</th> + <td>Sync</td> + </tr> + <tr> + <th>Composé</th> + <td>Oui</td> + </tr> + <tr> + <th>Action par défaut</th> + <td>Mettre à jour l’élément DOM</td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p> +Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><input placeholder="Saisissez du texte" name="name"/> -<p id="values"></p></pre> +```html +<input placeholder="Saisissez du texte" name="name"/> +<p id="values"></p> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">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; -}</pre> +} +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Examples")}}</p> +{{EmbedLiveSample("Examples")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - <tr> - <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | +| {{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}} | {{Spec2('UI Events')}} | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p> +{{Compat("api.HTMLElement.beforeinput_event")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li> -</ul> +- É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 --- -<p>{{APIRef}}</p> +{{APIRef}} -<p>L'événement <strong>change</strong> est déclenché pour les éléments {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> et {{HTMLElement("textarea")}} <em>(zone de texte)</em> lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, <strong>change</strong> n'est pas nécessairement déclenché pour chaque changement de valeur.</p> +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. <table class="properties"> - <tbody> - <tr> - <th scope="row">Propagation</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Gestionnaire d'événements</th> - <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Propagation</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Gestionnaire d'événements</th> + <td> + {{domxref("GlobalEventHandlers/onchange", "onchange")}} + </td> + </tr> + </tbody> </table> -<p>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 <strong>change</strong> se déclenche à un moment différent :</p> +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 : -<ul> - <li>Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <code><input type="radio"></code> et <code><input type="checkbox"></code><em>(case à cocher</em>).</li> - <li>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" <em>(sélecteur de date)</em> pour <code><input type="date"></code>, en sélectionnant un fichier d'un "file picker" <em>(sélecteur de fichier)</em> pour <code><input type="file"></code>, etc.).</li> - <li>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 <code><input type="text"></code>).</li> -</ul> +- Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`_(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 `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, 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 `<input type="text">`). -<p>Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement <strong>change</strong> 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")}}).</p> +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")}}). -<p><a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">La spécification HTML répertorie les types <code><input></code> qui doivent déclencher l'événement <code>change</code>.</a></p> +[La spécification HTML répertorie les types `<input>` qui doivent déclencher l'événement `change`.](https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply) -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Lélément_<select>">L'élément <select></h3> +### L'élément \<select> -<p>Le code suivant gère l'événement <strong>change</strong> sur {{HTMLElement("select")}} en appellant la fonction <code>changeEventHandler() </code>dans<code> l'attribut <em>onchange</em>. Il lit la valeur de la cible de l'événement et la montre dans une alerte.</code></p> +Le code suivant gère l'événement **change** sur {{HTMLElement("select")}} en appellant la fonction `changeEventHandler() `dans` l'attribut onchange. Il lit la valeur de la cible de l'événement et la montre dans une alerte.` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><label>Choose an ice cream flavor: - <select class="ice-cream" name="ice-cream"> - <option value="">Select One …</option> - <option value="chocolate">Chocolate</option> - <option value="sardine">Sardine</option> - <option value="vanilla">Vanilla</option> - </select> -</label> +```html +<label>Choose an ice cream flavor: + <select class="ice-cream" name="ice-cream"> + <option value="">Select One …</option> + <option value="chocolate">Chocolate</option> + <option value="sardine">Sardine</option> + <option value="vanilla">Vanilla</option> + </select> +</label> -<div class="result"></div></pre> +<div class="result"></div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { display: grid; grid-template-areas: "select result"; } @@ -78,88 +81,67 @@ select { .result { grid-area: result; -}</pre> +} +``` -<h4 id="Javascript">Javascript</h4> +#### Javascript -<pre class="brush: js">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}`; -});</pre> +}); +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }}</p> +{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }} -<h3 id="Lélément_dentrée_de_texte">L'élément d'entrée de texte</h3> +### L'élément d'entrée de texte -<p>Pour certains éléments, notamment <code><input type="text"></code>, 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.</p> +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. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><input placeholder="Enter some text" name="name"/> -<p id="log"></p></pre> +```html +<input placeholder="Enter some text" name="name"/> +<p id="log"></p> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">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; -}</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}</p> - -<ul> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +} +``` + +#### Résultat + +{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }} -<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2> +## 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 -<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> +{{Compat("api.GlobalEventHandlers.onchange")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<p>Cet événement est aussi déclenché dans plusieurs API non-standard:</p> +Cet événement est aussi déclenché dans plusieurs API non-standard: -<ul> - <li>{{domxref("NetworkInformation.connection")}} déclenche l'événement <strong>change</strong> lorsque les informations de connexions changent.</li> - <li>{{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.</li> -</ul> +- {{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 --- -<p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> -<p>La méthode <b>click</b> simule un clic sur un élément.</p> -<h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox">element.click()</pre> -<h2 id="Notes">Notes</h2> -<p>Lorsque la méthode <code>click</code> 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 <code>click</code> 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 <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p> -<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p> -<div> - <p>{{gecko_callout_heading("5.0")}}</p> - <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type - <i> - button</i> - , - <i> - checkbox</i> - , - <i> - radio</i> - , - <i> - reset</i> - ou - <i> - submit</i> - . Gecko n'implémentait pas la méthode <code>click</code> 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.</p> - <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5">HTML5</a>.</p> - <p>D'autres implémentations du DOM peuvent se comporter différemment.</p> -</div> - -<h2 id="Specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -p>{{Compat("api.HTMLElement.click")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>Gestionnaires d'événements liés - <ul> - <li>{{domxref("GlobalEventHandlers.onclick")}}</li> - <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li> - <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li> - </ul> - </li> -</ul> +{{ 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 --- -<div> -<div>{{APIRef("HTML DOM")}}</div> -</div> - -<p><code>La propriété </code><strong><code>HTMLElement.contentEditable</code></strong> est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :</p> - -<ul> - <li><code>"true"</code> <em>(vrai)</em> indique que l'élément est éditable.</li> - <li><code>"false"</code> <em>(faux)</em> indique que l'élément ne sera pas éditable.</li> - <li><code>"inherit"</code> <em>(hérité)</em> indique que l'élément héritera de l'état editable de son parent.</li> -</ul> - -<p>Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><em>editable</em> = element.contentEditable -element.contentEditable = "true" -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.HTMLElement.contentEditable")}}</p> - -<p>Dans Internet Explorer, le <code>contentable</code> 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.</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li> <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li> - <li>{{domxref("HTMLElement.isContentEditable")}}</li> - <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li> -</ul> +{{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 --- -<p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> -<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p> -<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> -<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir; -referenceElement.dir = <var>NouvelleDirection</var>; -</pre> -<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p> -<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p> -<h2 id="Exemple">Exemple</h2> -<pre class="brush: js">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" -</pre> -<h2 id="Notes">Notes</h2> -<p>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).</p> -<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p> -<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p> -<div> - <p>{{ gecko_callout_heading("7.0") }}</p> - <p>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.</p> -</div> -<h2 id="Sp.C3.A9cification">Spécification</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<p> </p> +``` + +## 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 --- -<div>{{ APIRef("HTML DOM") }}</div> +{{ APIRef("HTML DOM") }} -<p>La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. 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.</p> +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. -<p>La propriété <code>hidden</code> 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.</p> +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. -<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p> +Des cas d'utilisation appropriés de `hidden` comprennent : -<ul> - <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li> - <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li> - <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li> - <li>la création d'un canevas hors écran comme tampon de dessin.</li> -</ul> +- 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. -<p>Des cas inappropriés d'utilisation comprennent :</p> +Des cas inappropriés d'utilisation comprennent : -<ul> - <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li> - <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li> -</ul> +- 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. -<div class="note"> -<p><strong>Note :</strong> Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p> -</div> +> **Note :** Des éléments qui ne sont pas `hidden` ne doivent pas faire référence à des éléments qui le sont. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>estCaché</em> = <em>HTMLElement</em>.hidden; + estCaché = HTMLElement.hidden; -<em>HTMLElement</em>.hidden = true | false;</pre> + HTMLElement.hidden = true | false; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p> +Un Boolean qui est `true` si l'élément est caché à la vue ; sinon, la valeur est `false`. -<h2 id="Example">Exemple</h2> +## Exemple -<p>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.</p> +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. -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">document.getElementById("boutonOk") +```js +document.getElementById("boutonOk") .addEventListener("click", function() { document.getElementById("bienvenue").hidden = true; document.getElementById("impressionnant").hidden = false; -}, false);</pre> +}, false); +``` -<p>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.</p> +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. -<h3 id="HTML">HTML</h3> +### HTML -<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p> +Le code HTML pour les deux boîtes est montré ci-dessous. -<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4> +#### Le panneau bienvenue -<pre class="brush: html"><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></pre> +```html +<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> +``` -<p>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.</p> +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. -<h4 id="Le_panneau_de_suite">Le panneau de suite</h4> +#### Le panneau de suite -<p>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 <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p> +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: -<pre class="brush: html"><div id="impressionnant" class="panneau" hidden> - <h1>Merci !</h1> - <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être +```html +<div id="impressionnant" class="panneau" hidden> + <h1>Merci !</h1> + <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes - d'une façon impressionnante pour rendre le monde plus impressionnant !</p> -</div></pre> + d'une façon impressionnante pour rendre le monde plus impressionnant !</p> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p> +Le contenu est mis en forme en utilisant le CSS ci-dessous. -<pre class="brush: css">.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%; -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Example', 560, 200) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.HTMLElement.hidden")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Element.hidden")}}</li> - <li>{{cssxref("display")}}</li> -</ul> +} +``` + +### 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 --- -<div> - {{ApiRef}}</div> -<h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2> -<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p> -<h2 id="Propriétés">Propriétés</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}</td> - <td>{{domxref("DOMString")}}</td> - <td>La touche de navigation clavier assignée à l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Une chaîne de caractères définissant la touche de navigation clavier assignée.</td> - </tr> - <tr> - <td>{{domxref("element.className", "className")}}</td> - <td>{{domxref("DOMString")}}</td> - <td>Le nom de la classe <a href="/fr/docs/CSS">CSS</a> définie pour l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td> - <td>{{domxref("DOMStringMap")}}</td> - <td>Un tableau associatif des attributs <code>data-*</code> de l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.dir", "dir")}}</td> - <td>{{domxref("DOMString")}}</td> - <td>L'attribut <code>dir</code> de l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.id", "id")}}</td> - <td>{{domxref("DOMString")}}</td> - <td>L'ID de l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.lang", "lang")}}</td> - <td>{{domxref("DOMString")}}</td> - <td>L'attribut <code>lang</code> de l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.title", "title")}}</td> - <td>{{domxref("DOMString")}}</td> - <td>L'attribut <code>title</code> de l'élément.</td> - </tr> - </tbody> -</table> -<h2 id="Méthodes">Méthodes</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom et paramètres</th> - <th scope="col">Renvoie</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}</td> - <td><code>void</code></td> - <td>Retire le focus clavier de l'élément actuellement sélectionné.</td> - </tr> - <tr> - <td>{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}</td> - <td><code>void</code></td> - <td>Envoie un évènement <code>click</code> à l'élément.</td> - </tr> - <tr> - <td>{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}</td> - <td><code>void</code></td> - <td>Place le focus clavier sur l'élément.</td> - </tr> - </tbody> -</table> -<h2 id="Spécification">Spécification</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +{{ApiRef}} -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Interface des éléments HTML -<p>{{Compat("api.HTMLElement")}}</p> +`HTMLElement` est une interface abstraite pour le [DOM](/fr/docs/DOM), héritée par tous les éléments HTML. -<h2 id="See_also">Voir aussi</h2> +## Propriétés -<ul> - <li>{{domxref("Element")}}</li> -</ul> +| 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 --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p><code><strong>Node.innerText</strong></code> 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.</p> +**`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. -<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p> +{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux. -<h2 id="Spécification">Spécification</h2> +## Spécification -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td> - </tr> - </tbody> -</table> +| 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. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.Node.innerText")}} +## Voir aussi -<p>{{Compat("api.Node.innerText")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("HTMLElement.outerText")}}</li> - <li>{{domxref("Element.innerHTML")}}</li> -</ul> +- {{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 --- -<p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code> n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p> +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). -<p>De plus, l'évènement <code>input</code> se déclenche sur les éditeurs <a href="/fr/docs/Web/API/HTMLElement/contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . S'il y a deux éléments ou plus qui ont <code>contenteditable</code> à true <em>(vrai)</em>, "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 <a href="/fr/docs/Web/API/Document/designMode"><code>designMode</code></a> .</p> +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) . -<h2 id="Information_générale">Information générale</h2> +## Information générale -<dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Oui</dd> - <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> - <dd style="margin: 0 0 0 120px;">Non</dd> - <dt style="float: left; text-align: right; width: 120px;">Cible</dt> - <dd style="margin: 0 0 0 120px;">Élement</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">La valeur ou le contenu est modifié</dd> -</dl> +- 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é -<p> </p> -<h2 id="Propriétés">Propriétés</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> +## Propriétés -<h2 id="Specifications">Spécifications</h2> +| 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. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +## Spécifications -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +| 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')}} | -<p>{{Compat("api.HTMLElement.input_event")}}</p> +## Compatibilité des navigateurs -<h2 id="Voir_aussi">Voir aussi</h2> +{{Compat("api.HTMLElement.input_event")}} -<ul> - <li>{{event("keydown")}}</li> - <li>{{event("keyup")}}</li> - <li>{{event("keypress")}}</li> - <li>{{event("input")}}</li> -</ul> +## 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 --- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> +{{ APIRef("HTML DOM") }} -<p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p> +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)_. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable -</pre> + editable = element.isContentEditable -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable; -document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;</pre> +```js +document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable; +document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable; +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p id="myText1">Uneditable Paragraph</p> -<p id="myText2" contentEditable="true">Editable Paragraph</p> +```html +<p id="myText1">Uneditable Paragraph</p> +<p id="myText2" contentEditable="true">Editable Paragraph</p> -<p id="infoText1">Can edit the first paragraph? </p> -<p id="infoText2">Can edit the second paragraph? </p></pre> +<p id="infoText1">Can edit the first paragraph? </p> +<p id="infoText2">Can edit the second paragraph? </p> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{ EmbedLiveSample('Example') }}</p> +{{ EmbedLiveSample('Example') }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement de la dernière image, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Image de {{SpecName('HTML WHATWG')}}, definition initiale.</td> - </tr> - </tbody> -</table> +| 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. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLElement.isContentEditable")}}</p> +{{Compat("api.HTMLElement.isContentEditable")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("element.contentEditable")}}</li> - <li>L'attribut global <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</li> -</ul> +- {{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 --- -<p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> -<p>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.</p> -<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> -<pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang -référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang -</pre> -<p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> 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.</p> -<h2 id="Exemple">Exemple</h2> -<pre class="brush: js">// 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"; } -</pre> -<h2 id="Notes">Notes</h2> -<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a href="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. 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 <code>unknown</code> (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.</p> -<p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p> -<h2 id="Sp.C3.A9cification">Spécification</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td> </td> - </tr> - </tbody> -</table> -<p> </p> +``` + +## 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 --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p>Propriété <abbr>DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p> +Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight; -</pre> + var hauteurTotaleElem = document.getElementById(id).offsetHeight; -<p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p> +_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. -<h3 id="Description">Description</h3> +### Description -<p>Typiquement, la propriété <strong>offsetHeight</strong> 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.</p> +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. -<h3 id="Exemple">Exemple</h3> +### Exemple -<h2 id="Example">Example</h2> +## Example -<p><img src="dimensions-offset.png"></p> + -<p>L'exemple d'image ci-avant montre une barre de défilement et un décalage <code>offsetHeight</code> qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs <code>offsetHeight</code> é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 <code>scrollTop</code> pour le conteneur.</p> +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. -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> +`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. -<h3 id="Notes">Notes</h3> +### Notes -<p><code>offsetHeight</code> 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).</p> +`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). -<h3 id="R.C3.A9f.C3.A9rences">Références</h3> +### Références -<ul> - <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li> - <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> -</ul> +- [_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) -<h3 id="Voir_aussi">Voir aussi</h3> +### Voir aussi -<ul> - <li><a href="/fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li> - <li><a href="/fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li> - <li><a href="/fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li> -</ul>
\ 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 --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Renvoie le nombre de pixels dont le - <i> - coin supérieur gauche</i> - de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval"><i>left</i> =<i>element</i>.offsetLeft; -</pre> -<p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p> -<h3 id="Note">Note</h3> -<p><code>offsetLeft</code> 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 <b>span</b> 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é <code>offsetLeft</code> 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 à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p> -<h3 id="Exemple">Exemple</h3> -<pre>var colorTable = document.getElementById("t1"); -var tOLeft = colorTable.offsetLeft; - -if (tOLeft > 5) { - // grand décalage à gauche : faire quelque chose ici -} -</pre> -<h3 id="Exemple_2">Exemple</h3> -<p>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.</p> - -<p><img src="offsetleft.jpg"></p> - -<p><small>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.</small></p> -<pre class="brush: html"><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. + + + +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 +<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> var box = document.getElementById("box"); var long = document.getElementById("long"); box.style.left = long.offsetLeft + document.body.scrollLeft; box.style.top = long.offsetTop + document.body.scrollTop; box.style.width = long.offsetWidth; box.style.height = long.offsetHeight; -</script> -</pre> -<h3 id="Voir_aussi">Voir aussi</h3> -<p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p> -<p><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p>
\ No newline at end of file +</script> +``` + +### 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 --- -<p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>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'<b>offsetParent</b>.</p> -<h3 id="Syntaxe">Syntaxe</h3> -<pre class="eval"><i>objetParent</i> = element.offsetParent -</pre> -<h3 id="Param.C3.A8tres">Paramètres</h3> -<ul> - <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li> -</ul> -<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p>
\ 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 --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p> +**offsetTop** renvoie la distance entre l'élément courant et le haut du nœud [`offsetParent`](/fr/docs/DOM/element.offsetParent). -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval"><em>topPos</em> = element.offsetTop; -</pre> + topPos = element.offsetTop; -<h3 id="Param.C3.A8tres">Paramètres</h3> +### Paramètres -<ul> - <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li> -</ul> +- `topPos` est le nombre de pixels depuis le haut de l'élément parent. -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre>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 -} -</pre> + } -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<p>{{ DOM0() }}</p> +{{ DOM0() }} -<h3 id="R.C3.A9f.C3.A9rences">Références</h3> +### Références -<p><a href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
\ 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 --- -<p>{{ ApiRef() }}</p> +{{ ApiRef() }} -<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> +### Résumé -<p>Renvoie la largeur totale d'un élément.</p> +Renvoie la largeur totale d'un élément. -<h3 id="Syntaxe">Syntaxe</h3> +### Syntaxe -<pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth; -</pre> + var offsetWidth = element.offsetWidth; -<p><code>offsetWidth</code> est une propriété en lecture seule.</p> +`offsetWidth` est une propriété en lecture seule. -<h3 id="Description">Description</h3> +### Description -<p>Typiquement, l'attribut <code>offsetWidth</code> 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.</p> +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. -<h2 id="exemple">Exemple</h2> +## Exemple -<p><img src="dimensions-offset.png"></p> + -<h3 id="Sp.C3.A9cification">Spécification</h3> +### Spécification -<p><code>offsetWidth</code> fait partie du modèle objet <abbr>DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> +`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. -<h3 id="Notes">Notes</h3> +### Notes -<p><code>offsetWidth</code> est une propriété du modèle objet <abbr>DHTML</abbr> 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).</p> +`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). -<h3 id="R.C3.A9f.C3.A9rences">Références</h3> +### Références -<ul> - <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li> - <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> -</ul>
\ 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 --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>{{ Non-standard_header() }}</p> +{{ Non-standard_header() }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p><strong><code>HTMLElement.outerText</code></strong> 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.</p> +**`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. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Voir <a href="http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435">cette réponse proposée sur StackOverflow</a>.</p> +Voir [cette réponse proposée sur StackOverflow](http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435). -<h2 id="Spécification">Spécification</h2> +## Spécification -<p>Ne fait partie d'aucune spécification. Discussion de la norme : <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p> +Ne fait partie d'aucune spécification. Discussion de la norme : [whatwg/html#668](https://github.com/whatwg/html/issues/668). -<p>Microsoft en a publié <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">une description sur MSDN</a>.</p> +Microsoft en a publié [une description sur MSDN](<https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx>). -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLElement.outerText")}}</p> +{{Compat("api.HTMLElement.outerText")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{domxref("Node.innerText")}}</li> - <li>{{domxref("Element.outerHTML")}}</li> -</ul> +- {{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 --- -<div>{{ APIRef("HTML DOM") }}</div> +{{ APIRef("HTML DOM") }} -<p>La propriété <strong><code>HTMLElement.title</code></strong> 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é.</p> +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é. -<div class="note"> -<p><strong>Note :</strong> Si un nœud n'a pas d'attribut <code>title</code>, 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..</p> +> **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.. +> +> <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> -<pre> <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> -</pre> -</div> +## Syntaxe -<h2 id="Syntax">Syntaxe</h2> + var chn = element.title; + element.title = chn; -<pre class="eval">var <em>chn</em> = <em>element</em>.title;<em> -</em>element.title = <em>chn</em>; -</pre> +## Exemple -<h2 id="Example">Exemple</h2> +```js + bouton1.title = "cliquer pour rafraîchir"; +``` -<pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir"; -</pre> +## Spécifications -<h2 id="Specification">Spécifications</h2> +| 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. | -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-title', 'title')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>Pas de changement par rapport à la {{SpecName('DOM1')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("api.HTMLElement.title")}} -<p>{{Compat("api.HTMLElement.title")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'attribut HTML global <a href="/fr/docs/Web/HTML/Attributs_universels/title"><strong>title</strong></a>.</li> -</ul> +- 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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> 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 <code>none</code>, alors l'événement ne pourra pas être généré.</p> +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é. <table class="properties"> - <tbody> - <tr> - <th scope="row">Bulles</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Annulable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("TransitionEvent")}}</td> - </tr> - <tr> - <th scope="row">Propriété de gestionnaire d'événements</th> - <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Bulles</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestionnaire d'événements</th> + <td> + {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} + </td> + </tr> + </tbody> </table> -<p>L'événement <code>transitionend</code> 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 <code>transitioncancel</code> est déclenché, l'événement <code>transitionend</code> ne se déclenchera pas.</p> - -<h2 id="Propriétés">Propriétés</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriétés</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>propertyName</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name of the CSS property associated with the transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{readonlyInline}}</td> - <td>Float</td> - <td>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 <code>transition-delay</code>.</td> - </tr> - <tr> - <td><code>pseudoElement</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>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).</td> - </tr> - </tbody> -</table> +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). | -<h2 id="Examples">Examples</h2> +## Examples -<p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p> +This code gets an element that has a transition defined and adds a listener to the `transitionend` event: -<pre class="brush: js">const transition = document.querySelector('.transition'); +```js +const transition = document.querySelector('.transition'); -transition.addEventListener('transitionend', () => { +transition.addEventListener('transitionend', () => { console.log('Transition ended'); -});</pre> +}); +``` -<p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p> +The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}: -<pre class="brush: js">const transition = document.querySelector('.transition'); +```js +const transition = document.querySelector('.transition'); -transition.ontransitionend = () => { +transition.ontransitionend = () => { console.log('Transition ended'); -};</pre> +}; +``` -<h3 id="Live_example">Live example</h3> +### Live example -<p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p> +In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay: -<pre class="brush: html"><div class="transition">Hover over me</div> -<div class="message"></div></pre> +```html +<div class="transition">Hover over me</div> +<div class="message"></div> +``` -<pre class="brush: css">.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); -}</pre> +} +``` -<p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> 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.</p> +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. -<pre class="brush: js">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'; }); -</pre> +``` -<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> +{{ EmbedLiveSample('Live_example', '100%', '150px') }} -<p>The <code>transitionend</code> event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.</p> +The `transitionend` event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction. -<p>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.</p> +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. -<p>If the <code>transitioncancel</code> event is fired, the <code>transitionend</code> event will not fire.</p> +If the `transitioncancel` event is fired, the `transitionend` event will not fire. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.HTMLElement.transitionend_event")}}</p> +{{Compat("api.HTMLElement.transitionend_event")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}</li> - <li>L'interface {{domxref("TransitionEvent")}}</li> - <li>Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> - <li>Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li> - <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}</li> - <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}</li> -</ul> +- 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")}} |