1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
---
title: element.clientHeight
slug: Web/API/Element/clientHeight
tags:
- Référence_du_DOM_Gecko
translation_of: Web/API/Element/clientHeight
---
<p>{{ ApiRef() }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>Renvoie la hauteur intérieure d'un élément en pixels. Celle-ci comprend les marges intérieures éventuelles (padding), mais ni la barre de défilement horizontale, ni les bordures ,ni les marges extérieures (margin).</p>
<p><code>clientHeight</code> peut être calculée comme la propriété CSS <code>height</code> + la propriété CSS <code>padding</code> - la hauteur de la barre de défilement horizontale (si présente).</p>
<h3 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h3>
<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
</pre>
<p><var>h</var> est un entier représentant la valeur <code>clientHeight</code> de l'élément <var>element</var> en pixels. <code>clientHeight</code> est une propriété en lecture seule.</p>
<h3 id="Exemple" name="Exemple">Exemple</h3>
<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
<p>LA CHOUETTE<br>
<br>
Tel un fantôme dans la nuit<br>
Elle s'envole sans un bruit<br>
C'est la silhouette de la chouette<br>
Qui régurgite des boulettes<br>
Son cri terrifie les petits<br>
Qui se blottissent dans leur lit<br>
<br>
<br>
LE RENARD<br>
<br>
Animal nocturne et rusé<br>
Il a un beau manteau de feu<br>
C'est un canidé très futé<br>
S'approcher de lui on ne peut<br>
Avec sa queue immaculée<br>
Des passants il flatte les yeux<br>
<br>
<br>
LA CHAUVE-SOURIS<br>
<br>
C'est très dur de la voir<br>
Puisqu'elle vit dans le noir<br>
Elle aime du sang boire<br>
Et elle sort le soir<br>
<br>
<br>
LA GRENOUILLE<br>
<br>
Qu'est-c'qui saute et qui mouille<br>
Qui plonge et qui farfouille<br>
Qui nage et qui patouille<br>
C'est bien sûr la grenouille<br>
<br>
<br>
LE LION<br>
<br>
Le lion est carnivore<br>
Il a un beau pelage<br>
Il est souvent en cage<br>
Et ce soir il est mort<br>
<br>
<br>
L'ELEPHANT<br>
<br>
Descendant du mammouth<br>
Il est très imposant<br>
c'est bien sûr l'éléphant<br>
attendez j'ai un doute<br>
<br>
<br>
LE CHAT<br>
<br>
Talentueux chasseur<br>
Le chat est un joueur-né<br>
Il cherche avec son nez<br>
Et vit dans sa demeure</p>
<p>poèmes venant du <a class="external" href="http://membres.lycos.fr/peter2000/">site de peter2000</a></p>
<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
</div>
<span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ 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') }}</span></div>
<p style="margin-top: 270px;"><img alt="Image:clientHeight_fr.png"></p>
<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
<p><code>clientHeight</code> ne fait partie d'aucune spécification du W3C.</p>
<h3 id="Notes" name="Notes">Notes</h3>
<p><code>clientHeight</code> est une propriété non standard, qui a été introduite dans le modèle objet d'Internet Explorer.</p>
<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
<ul>
<li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp">Définition de clientHeight sur MSDN (en anglais)</a></li>
<li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">Mesure des dimensions et de la position d'un élément sur MSDN (en anglais)</a></li>
<li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Référence du DOM Gecko sur clientHeight (en anglais)</a></li>
</ul>
<p>{{ languages( { "en": "en/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>
|
