From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/htmlelement/beforeinput_event/index.html | 96 ++++++++ .../fr/web/api/htmlelement/change_event/index.html | 167 +++++++++++++ files/fr/web/api/htmlelement/click/index.html | 123 ++++++++++ .../web/api/htmlelement/contenteditable/index.html | 113 +++++++++ files/fr/web/api/htmlelement/dataset/index.html | 102 ++++++++ files/fr/web/api/htmlelement/dir/index.html | 48 ++++ files/fr/web/api/htmlelement/focus/index.html | 223 ++++++++++++++++++ files/fr/web/api/htmlelement/hidden/index.html | 145 ++++++++++++ files/fr/web/api/htmlelement/index.html | 230 ++++++++++++++++++ .../fr/web/api/htmlelement/input_event/index.html | 261 +++++++++++++++++++++ .../api/htmlelement/iscontenteditable/index.html | 127 ++++++++++ files/fr/web/api/htmlelement/lang/index.html | 46 ++++ .../fr/web/api/htmlelement/offsetheight/index.html | 66 ++++++ files/fr/web/api/htmlelement/offsetleft/index.html | 56 +++++ .../fr/web/api/htmlelement/offsetparent/index.html | 22 ++ files/fr/web/api/htmlelement/offsettop/index.html | 50 ++++ .../fr/web/api/htmlelement/offsetwidth/index.html | 56 +++++ files/fr/web/api/htmlelement/outertext/index.html | 93 ++++++++ files/fr/web/api/htmlelement/style/index.html | 57 +++++ files/fr/web/api/htmlelement/tabindex/index.html | 25 ++ files/fr/web/api/htmlelement/title/index.html | 126 ++++++++++ 21 files changed, 2232 insertions(+) create mode 100644 files/fr/web/api/htmlelement/beforeinput_event/index.html create mode 100644 files/fr/web/api/htmlelement/change_event/index.html create mode 100644 files/fr/web/api/htmlelement/click/index.html create mode 100644 files/fr/web/api/htmlelement/contenteditable/index.html create mode 100644 files/fr/web/api/htmlelement/dataset/index.html create mode 100644 files/fr/web/api/htmlelement/dir/index.html create mode 100644 files/fr/web/api/htmlelement/focus/index.html create mode 100644 files/fr/web/api/htmlelement/hidden/index.html create mode 100644 files/fr/web/api/htmlelement/index.html create mode 100644 files/fr/web/api/htmlelement/input_event/index.html create mode 100644 files/fr/web/api/htmlelement/iscontenteditable/index.html create mode 100644 files/fr/web/api/htmlelement/lang/index.html create mode 100644 files/fr/web/api/htmlelement/offsetheight/index.html create mode 100644 files/fr/web/api/htmlelement/offsetleft/index.html create mode 100644 files/fr/web/api/htmlelement/offsetparent/index.html create mode 100644 files/fr/web/api/htmlelement/offsettop/index.html create mode 100644 files/fr/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/fr/web/api/htmlelement/outertext/index.html create mode 100644 files/fr/web/api/htmlelement/style/index.html create mode 100644 files/fr/web/api/htmlelement/tabindex/index.html create mode 100644 files/fr/web/api/htmlelement/title/index.html (limited to 'files/fr/web/api/htmlelement') diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html new file mode 100644 index 0000000000..72f9239a17 --- /dev/null +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'HTMLElement: beforeinput event' +slug: Web/API/HTMLElement/beforeinput_event +translation_of: Web/API/HTMLElement/beforeinput_event +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui
Interface{{DOMxRef("InputEvent")}}
Propriété gestionnaire d’évènementAucune
Sync / AsyncSync
ComposéOui
Action par défautMettre à jour l’élément DOM
+ +

Exemples

+ +

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

+ +

HTML

+ +
<input placeholder="Saisissez du texte" name="name"/>
+<p id="values"></p>
+ +

JavaScript

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

Résultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..552a6d0e70 --- /dev/null +++ b/files/fr/web/api/htmlelement/change_event/index.html @@ -0,0 +1,167 @@ +--- +title: change +slug: Web/API/HTMLElement/change_event +tags: + - Change + - DOM + - Event + - HTML + - Reference + - Web + - Élément HTML +translation_of: Web/API/HTMLElement/change_event +--- +

{{APIRef}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableNon
Interface{{domxref("Event")}}
Gestionnaire d'événements{{domxref("GlobalEventHandlers/onchange", "onchange")}}
+ +

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

+ + + +

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")}}).

+ +

La spécification HTML répertorie les types <input> qui doivent déclencher l'événement change.

+ +

Exemples

+ +

L'élément <select>

+ +

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.

+ +

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>
+ + + +

Javascript

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

Résultat

+ +

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

+ +

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

+ +

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

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+ +

JavaScript

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

Résultat

+ +

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

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}{{Spec2("HTML5 W3C")}}
{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}{{Spec2("DOM2 Events")}}Définition initiale
+ +

Compatibilités navigateurs

+ + + +

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

+ +

Voir aussi

+ +

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

+ + diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..554b3ec9a7 --- /dev/null +++ b/files/fr/web/api/htmlelement/click/index.html @@ -0,0 +1,123 @@ +--- +title: element.click +slug: Web/API/HTMLElement/click +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/click +--- +

{{ ApiRef() }}

+

Résumé

+

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

+

Syntaxe

+
element.click()
+

Notes

+

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

+

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

+
+

{{gecko_callout_heading("5.0")}}

+

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

+

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

+

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

+
+

Spécification

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

Compatibilité des navigateurs

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}5{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
input@file (limited){{CompatVersionUnknown}}4{{CompatVersionUnknown}}12.10{{CompatVersionUnknown}}
input@file (full){{CompatVersionUnknown}}4{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support de base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+
+

Note : Support de base, se réfère ici au minimum requis pas la spécification.

+
+


+  

diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..1863ffa2aa --- /dev/null +++ b/files/fr/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,113 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +tags: + - API + - HTML DOM + - HTMLElement + - Référence(2) + - contenteditable +translation_of: Web/API/HTMLElement/contentEditable +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

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

+ + + +

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

+ +

Syntaxe

+ +
editable = element.contentEditable
+element.contentEditable = "true"
+
+ +

Spécifications

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

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9)}}6[1]10.63.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9)}}6[1]{{CompatNo}}5
+
+ +

[1] Internet Explorer a un tas de bogues concernant l'implémentation de cette fonctionnalité. IE10 se bloque dans certains cas lors de la modification des listes (bug 796187). IE11 + utilise un positionnement non valide pour lorsqu'un élément est flottant (bug 858749). Dans IE9-10, la fenêtre se fige lorsque vous utilisez la molette de la souris pendant le déplacement (bug 809254). IE10-11 ne déclenche pas l'événement d'input (bug 794285). IE10 se bloque après avoir sélectionné "Couper" dans le menu contextuel (bug 801770). IE11 + ne permet pas de placer le caret dans une cellule de tableau vide (bug 807199). IE10 ne déclenche pas d'événement de contextmenu lorsque vous cliquez avec le bouton droit sur des mots mal orthographiés (bug 774350). IE11 ajoute des éléments {{HTMLElement ("br")}} à {{HTMLElement ("body")}} lors de l'affichage / dissimulation d'un {{HTMLElement ("iframe")}} avec un document contenteditable à l'intérieur (bug 864804). IE11 ne permet pas de désactiver les poignées de redimensionnement pour les images / entrées (bug 907422).

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..fa7ece8acc --- /dev/null +++ b/files/fr/web/api/htmlelement/dataset/index.html @@ -0,0 +1,102 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - Propriété + - Référence(2) + - dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +

{{ APIRef }}

+ +

La propriété HTMLElement.dataset fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.

+ +

Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (:), tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).

+ +

Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :

+ + + +

La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :

+ + + +

La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.

+ +

Par exemple, l'attribut nommé data-abc-def correspond à la clef abcDef.

+ +

Syntaxe

+ +
chaîne = element.dataset.nomEnCamelCase;
+element.dataset.nomEnCamelCase = chaîne;
+ +

Exemples

+ +
<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
+</div>
+
+var el = document.querySelector('#utilisateur');
+
+// el.id == 'utilisateur'
+// el.dataset.id === '1234567890'
+// el.dataset.utilisateur === 'Monsieur Tartempion'
+// el.dataset.dateDeNaissance === ''
+
+el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
+
+// 'unAttributDeDonnees' in el.dataset === false
+
+el.dataset.unAttributDeDonnees = 'mes données';
+// 'unAttributDeDonnees' in el.dataset === true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html new file mode 100644 index 0000000000..e4bd63a25e --- /dev/null +++ b/files/fr/web/api/htmlelement/dir/index.html @@ -0,0 +1,48 @@ +--- +title: element.dir +slug: Web/API/HTMLElement/dir +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/dir +--- +

{{ ApiRef() }}

+

Résumé

+

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

+

Syntaxe et valeurs

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

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

+

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

+

Exemple

+
var para = document.getElementById("para1");
+para.dir = "rtl";
+// change la direction du texte sur un paragraphe identifié par "para1"
+
+

Notes

+

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

+

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

+

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

+
+

{{ gecko_callout_heading("7.0") }}

+

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

+
+

Spécification

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

 

diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..3659a5a75b --- /dev/null +++ b/files/fr/web/api/htmlelement/focus/index.html @@ -0,0 +1,223 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

La méthode HTMLElement.focus() donne le focus à l'élément spécifié, s'il peut prendre le focus.

+ +

Syntaxe

+ +
element.focus();
+element.focus(focusOption); // Paramètre objet
+ +

Paramètres

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Est un objet ayant les propriétés suivantes:
+
+
+
preventScroll {{optional_inline}}
+
Est une valeur Boolean: +
    +
  • Si false, la méthode fera défiler la page pour que l'élément soit visible à l'écran.
    • +
  • Si true,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.
    • +
+
+
+
+
+ +

Exemples

+ +

Donner le focus à un champ texte

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Champ texte.">
+<p></p>
+<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au champ texte!</button>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Donner le focus à un bouton

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+ +

HTML

+ +
<button type="button" id="myButton">Cliquez!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au bouton!</button>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

Focus avec option

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">Cliquez-moi pour donner le focus au bouton!</button>
+<button type="button" onclick="focusNoScrollMethod()">Cliquez-moi pour donner le focus au bouton sans défilement!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">Cliquez!</button>
+</div>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notes

+ +

Si vous appelez HTMLElement.focus() à partir d'un gestionnaire d'événement mousedown, vous devez appeler event.preventDefault() pour empêcher le focus de quitter l'HTMLElement.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefoxEdgeInternet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebviewChrome for AndroidFirefox MobileEdge mobileIE mobileOpera AndroidSafari iOS
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..28cc5255d5 --- /dev/null +++ b/files/fr/web/api/htmlelement/hidden/index.html @@ -0,0 +1,145 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +translation_of: Web/API/HTMLElement/hidden +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propriété hidden de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut true si l'élément est caché, sinon sa valeur est false. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément. La propriété hidden s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.

+ +

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

+ + + +

Des cas inappropriés d'utilisation comprennent :

+ + + +
+

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

+
+ +

Syntaxe

+ +
estCaché = HTMLElement.hidden;
+
+HTMLElement.hidden = true | false;
+ +

Valeur

+ +

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

+ +

Exemple

+ +

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

+ +

JavaScript

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

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

+ +

HTML

+ +

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

+ +

Le panneau bienvenue

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

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

+ +

Le panneau de suite

+ +

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

+ +
<div id="impressionnant" class="panneau" hidden>
+  <h1>Merci !</h1>
+  <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
+  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
+  d'une façon impressionnante pour rendre le monde plus impressionnant !</p>
+</div>
+ +

CSS

+ +

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

+ +
.panneau {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.bouton {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}
+ +

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html new file mode 100644 index 0000000000..5e9cfbda3b --- /dev/null +++ b/files/fr/web/api/htmlelement/index.html @@ -0,0 +1,230 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement +--- +
+ {{ApiRef}}
+

Interface des éléments HTML

+

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

+

Propriétés

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

Méthodes

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

Spécification

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

Compatibilité des navigateurs

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Support de base{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("element.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("element.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("element.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("element.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("element.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("element.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Support de base{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("element.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("element.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("element.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("element.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("element.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("element.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
+
+

Voir également

+ diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..3e20f0e2bb --- /dev/null +++ b/files/fr/web/api/htmlelement/input_event/index.html @@ -0,0 +1,261 @@ +--- +title: input +slug: Web/API/HTMLElement/input_event +tags: + - DOM + - Element + - Entrée + - HTML5 +translation_of: Web/API/HTMLElement/input_event +--- +

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

+ +

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

+ +

Information générale

+ +
+
Spécification
+
HTML5, DOM Level 3 Events
+
Interface
+
{{domxref("Event")}}, {{domxref("InputEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Élement
+
Action par défaut
+
La valeur ou le contenu est modifié
+
+ +

 

+ +

Propriétés

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

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]9[2][3]{{CompatVersionUnknown}}[4]{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatVersionUnknown}}15{{CompatVersionUnknown}}
on contenteditable element{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}[5] +

 

+ 		15{{CompatVersionUnknown}}
when designMode is "on"{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("14")}}{{CompatNo}}15{{CompatVersionUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
immediately after compositionupdate{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("12")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
on contenteditable element{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
when designMode is "on"{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
data{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
isComposing{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
<select>{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Avant Gecko 12.0 {GeckoRelease ("12.0")}}, Gecko ne déclenchait pas les événements "input" pendant que la composition était en cours en utilisant des IME ou lorsque des clés mortes étaient utilisées sur Mac OS X.

+ +

[2] IE 9 ne déclenche pas un événement "input" lorsque l'utilisateur supprime des caractères d'une entrée (par exemple en appuyant sur Retour arrière ou Suppr., ou en utilisant l'opération "Cut" (couper)).

+ +

[3] IE 10 et 11 ont un bogue, l'évènement "input"  s'y déclenche lors des changements de l'attribut "placeholder" (espace réservé).

+ +

[4] Avant Opera 15, Opera ne déclenchait pas un événement "input" après la suppression du texte dans un champ de saisie .

+ +

[5] La cible de l'événement est l'élément " innermost" à la position du curseur.

+
+ +

Voir aussi

+ + + +

L'évènement change est lié . "change" se déclenche moins souvent que "input" - il n'est lancé que lorsque les modifications sont validées par l'utilisateur.

diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html new file mode 100644 index 0000000000..ba62e2d99d --- /dev/null +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html @@ -0,0 +1,127 @@ +--- +title: HTMLElement.isContentEditable +slug: Web/API/HTMLElement/isContentEditable +tags: + - HTML DOM + - Propriété + - Reference + - lecture seule + - Édition + - Élément HTML +translation_of: Web/API/HTMLElement/isContentEditable +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

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

+ +

Syntaxe

+ +
editable = element.isContentEditable
+
+ +

Exemple

+ +

JavaScript

+ +
document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
+document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
+ +

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>
+ +

Résultat

+ +

{{ EmbedLiveSample('Example') }}

+ +

Spécifications

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

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html new file mode 100644 index 0000000000..990a1cd780 --- /dev/null +++ b/files/fr/web/api/htmlelement/lang/index.html @@ -0,0 +1,46 @@ +--- +title: element.lang +slug: Web/API/HTMLElement/lang +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/lang +--- +

{{ ApiRef() }}

+

Résumé

+

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

+

Syntaxe et valeurs

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

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

+

Exemple

+
// ce bout de code compare la langue de base et
+// redirige vers une autre URL suivant la langue
+if (document.documentElement.lang === "en") {
+    window.location.href = "un_document.html.en";
+} else if(document.documentElement.lang === "ru") {
+    window.location.href = "un_document.html.ru";
+}
+
+

Notes

+

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

+

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

+

Spécification

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

 

diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..bfd4b1d130 --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,66 @@ +--- +title: element.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetHeight +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

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

+ +

Syntaxe

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

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

+ +

Description

+ +

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

+ +

Exemple

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:offsetHeight.png

+ +

Spécification

+ +

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

+ +

Notes

+ +

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

+ +

Références

+ + + +

Voir aussi

+ + + +

{{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}

diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..b9c055927b --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,56 @@ +--- +title: element.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetLeft +--- +

{{ ApiRef() }}

+

Résumé

+

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

+

Syntaxe

+
left =element.offsetLeft;
+
+

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

+

Note

+

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

+

Exemple

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

Exemple

+

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

+

Image:offsetLeft.jpg

+

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

+
<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>
+
+

Voir aussi

+

offsetParent, offsetTop, offsetWidth, offsetHeight

+

Spécification

+

Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.

+

MSDN: offsetLeft

+

{{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}

diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..d466de34de --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,22 @@ +--- +title: element.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ ApiRef() }}

+

Résumé

+

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

+

Syntaxe

+
objetParent = element.offsetParent
+
+

Paramètres

+ +

Spécification

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}

diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..6be7a15bd3 --- /dev/null +++ b/files/fr/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,50 @@ +--- +title: element.offsetTop +slug: Web/API/HTMLElement/offsetTop +tags: + - DOM + - DOM_0 +translation_of: Web/API/HTMLElement/offsetTop +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

offsetTop renvoie la distance entre l'élément courant et le haut du nœud offsetParent.

+ +

Syntaxe

+ +
topPos = element.offsetTop;
+
+ +

Paramètres

+ + + +

Exemple

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

Spécification

+ +

{{ DOM0() }}

+ +

Références

+ +

offsetTop definition sur MSDN

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}

diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..4d65ebae61 --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,56 @@ +--- +title: element.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +translation_of: Web/API/HTMLElement/offsetWidth +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Renvoie la largeur totale d'un élément.

+ +

Syntaxe

+ +
var offsetWidth = element.offsetWidth;
+
+ +

offsetWidth est une propriété en lecture seule.

+ +

Description

+ +

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

+ +

Exemple

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:offsetWidth.png

+ +

Spécification

+ +

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

+ +

Notes

+ +

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

+ +

Références

+ + + +

{{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}

diff --git a/files/fr/web/api/htmlelement/outertext/index.html b/files/fr/web/api/htmlelement/outertext/index.html new file mode 100644 index 0000000000..02b825ffe4 --- /dev/null +++ b/files/fr/web/api/htmlelement/outertext/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLElement.outerText +slug: Web/API/HTMLElement/outerText +tags: + - API + - DOM + - Propriété +translation_of: Web/API/HTMLElement/outerText +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Résumé

+ +

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

+ +

Exemple

+ +

Voir cette réponse proposée sur StackOverflow.

+ +

Spécification

+ +

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

+ +

Microsoft en a publié une description sur MSDN.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+
+ +
 
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..85a19bb89a --- /dev/null +++ b/files/fr/web/api/htmlelement/style/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +tags: + - DOM + - Style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ APIRef("HTML DOM") }}

+ +

Résumé

+ +

Renvoie un objet représentant l'attribut style de l'élément.

+ +

Exemple

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25cm";
+
+ +

Notes

+ +

Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.

+ +

Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou des feuilles de style externes.

+ +

Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser window.getComputedStyle.

+ +

Consultez la liste des propriétés CSS DOM pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété style pour styler des éléments dans le DOM.

+ +

Il est généralement préférable d'utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l'utilisation de la propriété style n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut style.

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + + +

Lien Externe

+ + + +

{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html new file mode 100644 index 0000000000..b2dd8ca956 --- /dev/null +++ b/files/fr/web/api/htmlelement/tabindex/index.html @@ -0,0 +1,25 @@ +--- +title: element.tabIndex +slug: Web/API/HTMLElement/tabIndex +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +

{{ ApiRef() }}

+

Résumé

+

Obtient ou définit l'ordre de tabulation de l'élément courant.

+

Syntaxe

+
element.tabIndex = iIndex;
+
+

Paramètres

+ +

Exemple

+
b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+

Spécification

+ diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html new file mode 100644 index 0000000000..3b406bc52b --- /dev/null +++ b/files/fr/web/api/htmlelement/title/index.html @@ -0,0 +1,126 @@ +--- +title: HTMLElement.title +slug: Web/API/HTMLElement/title +tags: + - API + - HTML DOM + - HTMLElement + - Propriété + - Reference +translation_of: Web/API/HTMLElement/title +--- +
{{ APIRef("HTML DOM") }}
+ +

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

+ +
+

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>
+
+
+ +

Syntaxe

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

Exemple

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

Spécifications

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

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf