path: root/files/fr/archive/mozilla/xul/listitem/index.html

---
title: listitem
slug: Archive/Mozilla/XUL/listitem
tags:
  - Éléments_XUL
translation_of: Archive/Mozilla/XUL/listitem
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
 « <a href="/fr/docs/Référence_XUL">Accueil de la référence XUL</a>    [
 <a href="#Exemples">Exemples</a> |
 <a href="#Attributs">Attributs</a> |
 <a href="#Propri.C3.A9t.C3.A9s">Propriétés</a> |
 <a href="#M.C3.A9thodes">Méthodes</a> |
 <a href="#Sujets_li.C3.A9s">Sujets liés</a> ]
</span></div> <p>Une ligne unique dans un élément <code><a href="/fr/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>. Le texte de la ligne est généralement spécifié soit en utilisant des éléments <code><a href="/fr/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code>, soit en plaçant un attribut <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code> directement sur l'élément listitem. Par défaut, contient un seul élément listcell du type et de la classe appropriées pour le listitem.
</p><p>Vous trouverez plus d'informations dans le <a href="fr/Tutoriel_XUL/Les_contr%c3%b4les_de_listes">Tutoriel XUL</a>.
</p>
<dl><dt> Attributs
</dt><dd> <a href="#a-accesskey">accesskey</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-current">current</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-preference">preference</a>, <a href="#a-selected">selected</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-listitem.type">type</a>, <a href="#a-value">value</a>
</dd></dl>
<dl><dt> Propriétés
</dt><dd> <a href="#p-accessKey">accessKey</a>, <a href="#p-accessible">accessible</a>, <a href="#p-checked">checked</a>, <a href="#p-control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-current">current</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a>
</dd></dl>
<dl><dt> Classes de style
</dt><dd> <a href="#s-listitem-iconic">listitem-iconic</a> </dd></dl>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<div class="float-right"><img alt="Image:XUL_ref_listbox.png"></div>
<pre> &lt;listbox id="laListe"&gt;
   &lt;listitem label="Rubis"/&gt;
   &lt;listitem label="Émeraude"/&gt;
   &lt;listitem label="Saphir" selected="true"/&gt;
   &lt;listitem label="Diamant"/&gt;
 &lt;/listbox&gt;
</pre>
<h3 id="Attributs" name="Attributs"> Attributs </h3>
<p>
</p><div id="a-accesskey">

<dl><dt> <code id="a-accesskey"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/accesskey">accesskey</a></code></dt>
<dd> Type : <i>caractère</i>
</dd><dd> Cet attribut doit être une lettre utilisée comme touche de raccourci. Cette lettre doit être un des caractères apparaissant dans l'attribut <code><code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code></code> de l'élément. </dd></dl>
<h4 id="Exemple" name="Exemple"> Exemple </h4>
<div class="float-right"><img alt="Image:XUL_ref_accesskey_attr.png"></div>
<pre>&lt;vbox&gt;
  &lt;label value="Entrez votre nom" accesskey="e" control="myName"/&gt;
  &lt;textbox id="myName"/&gt;
  &lt;button label="Annuler" accesskey="n"/&gt;
  &lt;button label="OK" accesskey="O"/&gt;
&lt;/vbox&gt;
</pre>
<h4 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"> Voir également </h4>
<p>Les attributs <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code> et <code id="a-acceltext"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/acceltext">acceltext</a></code>
</p>
</div>
<div id="a-checked">

<dl>
 <dt>
  <code id="a-checked"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/checked">checked</a></code></dt>
 <dd>
  Type :
  <i>
   booléen</i>
 </dd>
 <dd>
  Indique si l'élément est coché ou non.</dd>
 <dd>
  Utilisez <code>hasAttribute()</code> pour déterminer si cet attribut est défini plutôt que <code>getAttribute()</code>.<br>
  Pour les boutons, l'attribut <code>type</code> doit etre mis à <code>checkbox</code> ou à <code>radio</code> pour qu'un effet soit perceptible.</dd>
</dl>
</div>
<div id="a-command">

<dl><dt> <code id="a-command"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/command">command</a></code>
</dt><dd> Type : <i>id d'élément</i>
</dd><dd> Défini à la valeur de l'<code id="a-id"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/id">id</a></code> d'un élément <code><a href="/fr/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> observé par l'élément.
</dd></dl>


</div>
<div id="a-crop">

<dl><dt> <code id="a-crop"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/crop">crop</a></code>
</dt><dd> Type : <i>une des valeurs ci-dessous</i>
</dd><dd> Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut <code>crop</code>. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également.
</dd></dl>
<ul><li> <code>start</code> : Le texte sera tronqué du côté gauche.
</li><li> <code>end</code> : Le texte sera tronqué du côté droit.
</li><li> <code>left</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté gauche.
</li><li> <code>right</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté droit.
</li><li> <code>center</code> : Le texte sera tronqué en son milieu, en affichant le début et la fin normalement.
</li><li> <code>none</code> : Le texte ne sera pas tronqué avec une ellipse. Cependant il sera simplement coupé là où il est trop large. Le côté dépend de l'alignement CSS.
</li></ul>


</div>
<div id="a-current">

</div>
<div id="a-disabled">

<dl><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Indique si l'élément est ou non désactivé. Si cette valeur est définie à <code>true</code>, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènement <code>command</code> ne se déclenchera pas. </dd></dl>
<p><br>
</p>
<div class="float-right"><img alt="Image:XUL_ref_attr_disabled.png"></div>
<pre>&lt;!-- La case à cocher active/désactive le bouton --&gt;
&lt;checkbox label="Enable button"
    onclick="document.getElementById('buttRemove').disabled = this.checked"/&gt;
&lt;button id="buttRemove" label="Remove All" disabled="true"/&gt;
</pre>
</div>
<div id="a-image">

<dl><dt> <code id="a-image"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/image">image</a></code>
</dt><dd> Type : <i>URL d'une image</i>
</dd><dd> L'URL de l'image devant apparaître sur l'élément. Si cet attribut est vide ou omis, aucune image n'apparaîtra. La position de l'image est déterminée par les attributs <code id="a-dir"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/dir">dir</a></code> et <code id="a-orient"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/orient">orient</a></code>.
</dd></dl>


</div>
<div id="a-label">

<dl><dt> <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>
</dt><dd> Type : <i>chaîne de caractères</i>
</dd><dd> Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra.
</dd></dl>


</div>
<div id="a-preference">

<dl><dt> <code id="a-preference"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/preference">preference</a></code>
</dt><dd> Type : <i>id d'élément</i>
</dd><dd> Connecte l'élément à une préférence (élément <code><a href="/fr/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code>) correspondante. Cet attribut n'a d'effet qu'utilisé au sein d'un <code><a href="/fr/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code>. La valeur de la préférence sera mise à jour pour correspondre à la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/value">value</a></span></code> de l'élément.
</dd></dl>


</div>
<div id="a-selected">

<dl><dt> <code id="a-selected"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/selected">selected</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Indique si l'élément est sélectionné ou non. Cette valeur est en lecture seule. Pour changer la sélection, utilisez la propriété <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/selectedIndex">selectedIndex</a></span></code> ou <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/selectedItem">selectedItem</a></span></code> de l'élément conteneur.
</dd></dl>


</div>
<div id="a-tabindex">

<dl><dt> <code id="a-tabindex"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/tabindex">tabindex</a></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le <code>tabindex</code> est plus haut se trouvent plus tard dans la séquence de tabulation.
</dd></dl>


</div>
<div id="a-listitem.type">

</div>
<div id="a-value">

<dl><dt> <code id="a-value"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/value">value</a></code>
</dt><dd> Type : <i>chaîne</i>
</dd><dd> Cet attribut chaîne permet d'associer une valeur de données avec un élément. Il n'est destiné à aucune utilisation particulière, mais vous pouvez y accéder avec un script pour votre usage propre..
</dd></dl>


</div>

<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s"> Propriétés </h3>
<p>
</p><div id="p-accessKey">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/accessKey">accessKey</a></span></code>
</dt><dd> Type : <i>caractère</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-accesskey"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/accesskey">accesskey</a></code>.
</dd></dl>
<p><br>
</p>

</div>
<div id="p-accessible">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/accessible">accessible</a></span></code>
</dt><dd> Type : <i><a href="fr/NsIAccessible">nsIAccessible</a></i>
</dd><dd> Renvoie l'objet d'accessibilité pour l'élément.
</dd></dl>
<p><br>
</p>

</div>
<div id="p-checked"></div>
<div id="p-control"></div>
<div id="p-crop">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/crop">crop</a></span></code>
</dt><dd> Type : <i>chaîne de caractères</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-crop"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/crop">crop</a></code>.
</dd></dl>

</div>
<div id="p-current"></div>
<div id="p-disabled">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/disabled">disabled</a></span></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-disabled"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/disabled">disabled</a></code>.
</dd></dl>

</div>
<div id="p-image">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/image">image</a></span></code>
</dt><dd> Type : <i>URL d'image</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-image"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/image">image</a></code>.
</dd></dl>

</div>
<div id="p-label">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/label">label</a></span></code>
</dt><dd> Type : <i>chaîne de caractères</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>.
</dd></dl>

</div>
<div id="p-selected">

<dl>
<dt><code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/selected">selected</a></span></code> </dt>
<dd>Type : <i>booléen</i></dd>
<dd>La valeur de cette propriété est <code>true</code> si cet élément est sélectionné, ou <code>false</code> s'il ne l'est pas. Cette propriété est en lecture seule.</dd>
</dl></div>
<div id="p-tabIndex">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/tabIndex">tabIndex</a></span></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-tabindex"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/tabindex">tabindex</a></code>.
</dd></dl>

</div>
<div id="p-value">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/value">value</a></span></code>
</dt><dd> Type : <i>chaîne</i>
</dd><dd> Obtient et définit la valeur de l'attribut <code id="a-value"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/value">value</a></code>.
</dd></dl>

</div>

<h3 id="M.C3.A9thodes" name="M.C3.A9thodes"> Méthodes </h3>
<p><span class="lang lang-fr" lang="fr">
</span></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Héritées de XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Héritées de DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
</table>

<h3 id="Classes_de_style" name="Classes_de_style"> Classes de style </h3>
<p>Les classes suivantes peuvent être utilisées pour styler l'élément. Il convient de les utiliser plutôt que de changer le style de l'élément directement afin de s'intégrer plus naturellement dans le thème choisi par l'utilisateur.
</p><dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/listitem-iconic">listitem-iconic</a></code></dt>
 <dd>Use this class to have an image appear on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code>. Specify the image using the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd>
</dl>

<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s"> Sujets liés </h3>
<dl><dt> Éléments
</dt><dd> <code><a href="/fr/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code>, <code><a href="/fr/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code>
</dd></dl>
<dl><dt> Interfaces
</dt><dd> <a href="fr/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="fr/NsIDOMXULSelectControlItemElement">nsIDOMXULSelectControlItemElement</a>
</dd></dl>
<div class="noinclude">
</div>