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

HTML DOMのObject heightプロパティとは？使い方とサンプルコードを解説

HTML DOM Object heightプロパティとは

HTML DOMのheightプロパティは、ページ内に埋め込まれたオブジェクト（<object>要素）の高さを取得または設定するために使用されるプロパティです。高さの値はピクセル単位で指定します。

構文

オブジェクトの高さを取得する場合の構文は次のとおりです。

objObject.height

オブジェクトの高さを設定する場合の構文は次のとおりです。

objObject.height = pixels

ここで、pixelsには、オブジェクトの高さとして設定したい値（ピクセル数）を指定します。

実装例

それでは、DOMオブジェクトのheightプロパティを使った具体的な実装例を見てみましょう。この例では、ボタンをクリックすると埋め込みオブジェクトの高さが変更されます。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<object id="newObj" width="580" height="200" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red"></object>
<p>Click to update the height.</p>
<button onclick="display()">Update Height</button>
<p id="myid"></p>
<script>
   function display() {
      document.getElementById("newObj").height = "350";
   }
</script>
</body>
</html>

実行結果

初期状態では、赤い枠線のオブジェクトが幅580px・高さ200pxで表示されます。

HTML DOMのObject heightプロパティとは？使い方とサンプルコードを解説

続いて、「Update Height」ボタンをクリックしてみましょう。display()関数が呼び出され、heightプロパティによってオブジェクトの高さが350pxに更新されます。

HTML DOMのObject heightプロパティとは？使い方とサンプルコードを解説

まとめ

heightプロパティを使えば、JavaScriptから動的にオブジェクトの高さを読み取ったり変更したりできます。値はピクセル単位で扱われるため、レスポンシブなレイアウトやインタラクティブなUIを実装する際にも活用できる便利なプロパティです。

  1. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注

  2. HTML DOMのVideo heightプロパティの使い方を解説

    HTML DOMのVideo heightプロパティは、メディア（動画）の高さに対応する数値（ピクセル単位）を取得・設定するために使用されます。このプロパティを活用することで、JavaScriptから動的に動画要素の表示サイズを制御できるようになります。 構文heightプロパティの構文は以下のとおりです。 height値の取得（ピクセル単位）mediaObject.height height値の設定（ピクセル単位）mediaObject.height = number それでは、Video heightプロパティの具体的な使用例を見ていきましょう。 サンプルコード<!DOCTYPE h