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

JavaScriptで配置済み要素の左位置を設定する方法｜leftプロパティの使い方

leftプロパティで左位置を設定する

配置された（positionが指定された）要素の左位置を変更するには、leftプロパティを使用します。ボタンや画像など、任意の要素に対してJavaScriptから動的に左からの距離を設定できます。

なお、leftプロパティは単独では機能しません。対象となる要素に position: absolute; や position: relative; といった位置指定が事前に必要です。

サンプルコード

以下のコードでは、ボタンをクリックすると、そのボタン自身の左位置が150pxに移動します。実際にブラウザで実行して挙動を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            position: absolute;
         }
      </style>
   </head>
   <body>
      <h1>見出し1</h1>
      <p>これはデモ用テキストです。</p>
      <button type="button" id="myID" onclick="display()">左位置を変更</button>
      <script>
         function display() {
            document.getElementById("myID").style.left = "150px";
         }
      </script>
   </body>
</html>

コードの解説

  • CSS側で #myID に position: absolute; を指定することで、leftプロパティが有効になります。
  • ボタンがクリックされると、onclick属性によって display() 関数が呼び出されます。
  • document.getElementById("myID").style.left = "150px"; の一行により、要素の左位置が基準要素の左端から150pxの位置へと設定されます。

このように、element.style.left にピクセル値などの文字列を代入するだけで、ページ表示後に要素の位置を自由に制御できます。アニメーションやドラッグ操作など、インタラクティブなUIを実装する際の基本テクニックとして覚えておきましょう。

  1. JavaScriptで要素の下マージン（margin-bottom）を設定する方法

    JavaScriptで要素の下マージンを設定するには、marginBottom プロパティを使用します。このプロパティは、CSSの margin-bottom に対応しており、要素のスタイルオブジェクト（style）を通じて動的に値を変更できます。marginBottom プロパティの基本構文element.style.marginBottom = 値;値には px、%、em などの単位を付けた文字列を指定します。例えば 95px のように設定します。サンプルコード以下のコードでは、ボタンをクリックすると段落要素の下マージンが95pxに設定されます。実際にブラウザで実行して動作を確認してみてく

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE