HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMclientHeightプロパティ

HTML DOM clientHeightプロパティは、HTML要素の表示可能な高さを取得するために使用されます。この高さにはパディングが含まれますが、境界線、スクロールバー、余白は含まれません。コンテンツが要素からオーバーフローした場合でも、要素の高さのみが返されます。

次のように計算できます-

CSS height+ CSS padding – border –scrollbar(horizontal) – margins

構文

以下は、clientHeightプロパティの構文です-

element.clientHeight

例

HTMLDOMclientHeightプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
</style>
</head>
<body>
<p>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function heightDiv() {
      var x = document.getElementById("styleDIV");
      var txt = "Height including padding = " + x.clientHeight ;
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMclientHeightプロパティ

GETHEIGHTボタンをクリックすると-

HTMLDOMclientHeightプロパティ

上記の例では-

IDが「styleDIV」のdivを作成し、そのIDを使用してスタイルを適用しました-

#styleDIV {
   height: 250px;
   padding: 10px;
   margin: 15px;
   border: 2px solid blue;
   background-color: lightgreen;
   text-align:center;
}
<div id="styleDIV">
<b>A sample div</b>
</div>

次に、クリック時にheightDiv（）メソッドを実行するボタンGETHEIGHTを作成しました-

<button onclick="heightDiv()">GET HEIGHT</button>

heightDiv（）は、getElementById（）メソッドを使用して

要素を取得し、それを変数xに割り当てます。次に、
のclientHeightプロパティを使用して高さを取得し、テキストを追加した後、変数txtに割り当てます。 txt内のテキストは、段落のinnerHTMLプロパティを使用して段落内に表示され、txt変数が割り当てられます-

function heightDiv() {
   var x = document.getElementById("styleDIV");
   var txt = "Height including padding = " + x.clientHeight ;
   document.getElementById("Sample").innerHTML = txt;
}

  1. HTMLDOMoffsetHeightプロパティ

    HTML DOM offsetHeightプロパティは、要素の高さに対応する数値を返します。これには、パディング、境界線、スクロールバーが含まれますが、マージンは含まれません。 以下は構文です- 数値を返す HTMLelement.offsetHeight HTML DOM offsetHeightの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetHeight</title> <style>    fo

  2. HTMLDOMビデオの高さプロパティ

    HTML DOMビデオの高さプロパティは、メディアの高さ（ピクセル単位）に対応する数値を返す/設定します。 構文 以下は構文です- 高さを返す 数値として（px） mediaObject.height 高さの設定 数値（px）に mediaObject.height = number 動画の高さの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Video height</title> <style>    * {