Element.clientHeight

  • Revision slug: DOM/element.clientHeight
  • Revision title: element.clientHeight
  • Revision id: 120926
  • Created:
  • Creator: Peter1789
  • Is current revision? No
  • Comment /* Example */

Revision Content

{{template.DomRef()}}

clientHeight

DHTML property that represents the inner height of an element. This includes possible padding but not horizontal scrollbar (if present, if rendered), not border nor margin. If the element has an horizontal scrollbar, then its height value is substracted from the css height property value and from the vertical css padding value of the element in the computation of the clientHeight value.

Syntax and values

var intElemClientHeight = document.getElementById(id_attribute_value).clientHeight;

intElemClientHeight is a variable storing an integer corresponding to the clientHeight pixel value of the element. clientHeight is a read-only property.

Description

An element's clientHeight is a measurement which includes the element CSS height and the element vertical padding and, if rendered, substracting the height of horizontal scrollbar.

Example

padding-top

LA CHOUETTE

Tel un fantôme dans la nuit
Elle s'envole sans un bruit
C'est la silhouette de la chouette
Qui régurgite des boulettes
Son cri terrifie les petits
Qui se blottissent dans leur lit


LE RENARD

Animal nocturne et rusé
Il a un beau manteau de feu
C'est un canidé très futé
S'approcher de lui on ne peut
Avec sa queue immaculée
Des passants il flatte les yeux


LA CHAUVE-SOURIS

C'est très dur de la voir
Puisqu'elle vit dans le noir
Elle aime du sang boire
Et elle sort le soir


LA GRENOUILLE

Qu'est-c'qui saute et qui mouille
Qui plonge et qui farfouille
Qui nage et qui patouille
C'est bien sûr la grenouille


LE LION

Le lion est carnivore
Il a un beau pelage
Il est souvent en cage
Et ce soir il est mort


L'ELEPHANT

Descendant du mammouth
Il est très imposant
c'est bien sûr l'éléphant
attendez j'ai un doute


LE CHAT

Talentueux chasseur
Le chat est un joueur-né
Il cherche avec son nez
Et vit dans sa demeure

poèmes venant du site de peter2000

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:clientHeight.png

Specification

clientHeight is part of the MSIE's DHTML object model. clientHeight is not part of any W3C specification or technical recommendation.

Notes

clientHeight is a property of the DHTML object model which was first introduced by MSIE. It represents the inner height of an element.

References

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="clientHeight">clientHeight</h3>
<p>DHTML property that represents the inner height of an element. This includes possible padding but not horizontal scrollbar (if present, if rendered), not border nor margin. If the element has an horizontal scrollbar, then its height value is substracted from the css height property value and from the vertical css padding value of the element in the computation of the clientHeight value.
</p>
<h3 name="Syntax_and_values">Syntax and values</h3>
<pre class="eval">var <var>intElemClientHeight</var> = document.getElementById(<var>id_attribute_value</var>).clientHeight;
</pre>
<p><var>intElemClientHeight</var> is a variable storing an integer corresponding to the clientHeight pixel value of the element.
clientHeight is a read-only property.
</p>
<h3 name="Description">Description</h3>
<p>An element's <b>clientHeight</b> is a measurement which includes the element CSS height and the element vertical padding and, if rendered, substracting the height of horizontal scrollbar.
</p>
<h3 name="Example">Example</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<br>
</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')}}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;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;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{mediawiki.external('endif')}}</span></div>
<p style="margin-top: 270px;"><img alt="Image:clientHeight.png" src="File:en/Media_Gallery/ClientHeight.png"></p>
<h3 name="Specification">Specification</h3>
<p>clientHeight is part of the MSIE's DHTML object model.
clientHeight is not part of any W3C specification or technical recommendation.
</p>
<h3 name="Notes">Notes</h3>
<p>clientHeight is a property of the DHTML object model which was first introduced by MSIE. It represents the inner height of an element.
</p>
<h3 name="References">References</h3>
<ul><li> <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN's clientHeight definition</a>
</li><li> <a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a>
</li></ul>
Revert to this revision