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

HTML DOMオブジェクトのwidthプロパティの使い方

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

構文

オブジェクトの幅を設定する場合

objObject.width = pixels

オブジェクトの幅を取得する場合

objObject.width

上記の「pixels」には、オブジェクトの幅として設定したい値（ピクセル数）を指定します。

実装例

それでは、DOMオブジェクトのwidthプロパティを実装した例を見てみましょう。次のコードでは、<object>要素の初期幅を300pxに設定し、ボタンをクリックすると550pxに変更されます。

<!DOCTYPE html>
<html>
<body>
   <object id="newObj" width="300" height="200" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red"></object>
   <p>クリックして幅を更新します。</p>
   <button onclick="display()">Update Width</button>
   <p id="myid"></p>
   <script>
      function display() {
         document.getElementById("newObj").width = "550";
      }
   </script>
</body>
</html>

出力結果

HTML DOMオブジェクトのwidthプロパティの使い方

上記のように表示されたら、「Update Width」ボタンをクリックして幅を更新してみましょう。

HTML DOMオブジェクトのwidthプロパティの使い方

ボタンをクリックすると、display()関数が実行され、document.getElementById()によって取得した<object>要素のwidthプロパティに「550」が代入されるため、赤い枠線で囲まれたオブジェクトの幅が550pxに広がります。

  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 widthプロパティとは？動画の幅を取得・設定する方法

    HTML DOM の Video width プロパティは、<video> 要素で表示されるメディアの幅（width）に対応する数値を取得・設定できるプロパティです。単位はピクセル（px）で扱われ、JavaScript から動的に動画プレイヤーの横幅を変更したい場合に活用できます。 構文（Syntax） width プロパティの基本的な構文は以下のとおりです。 現在の幅（px）を取得する場合 mediaObject.width 幅（px）を新しく設定する場合 mediaObject.width = number なお、HTML 属性として記述された初期値は <video wi