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

JavaScriptで要素の幅を設定する方法｜style.widthプロパティの使い方を解説

JavaScriptでHTML要素の幅を設定するには、styleオブジェクトが持つwidthプロパティを使用します。値には「250px」のようなピクセル指定のほか、「50%」などの割合指定も利用でき、ボタンやdivなど任意の要素のサイズを動的に変更できます。

サンプルコード

以下のコードでは、ボタンをクリックするとdisplay()関数が実行され、ボタン自身の幅と高さが250pxに変更されます。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <button type="button" id="btn" onclick="display()">
      幅と高さを変更する
      </button>
      <script>
         function display() {
            document.getElementById("btn").style.width = "250px";
            document.getElementById("btn").style.height = "250px";
         }
      </script>
   </body>
</html>

widthプロパティを使う際のポイント

  • 単位を必ず指定する：「250px」のように、数値だけではなく単位（px、%、emなど）を付けて指定しましょう。単位がないと多くのブラウザでスタイルが適用されません。
  • 取得と設定の違いに注意：element.style.widthは、インラインスタイルとして設定された値のみを返します。実際に画面上で表示されている幅を取得したい場合は、element.offsetWidthを使用してください。
  • CSSより優先される：style.widthによる指定はインラインスタイルになるため、外部CSSファイルや