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

JavaScriptで要素の配置方法（position）を設定・変更する方法

JavaScriptで要素の配置方法を設定または変更するには、positionプロパティを使用します。CSSと同様に、JavaScriptからも「element.style.position」にアクセスすることで、ページ表示後に動的に配置方法を切り替えることができます。

positionプロパティで指定できる主な値

  • static：初期値。通常の文書フローに従って配置され、topやleftなどのオフセット指定は無効になります。
  • relative：通常の位置を基準に、top・right・bottom・leftで相対的に移動します。
  • absolute：positionが指定された直近の祖先要素を基準に、絶対的な位置へ配置されます。文書フローからは外れます。
  • fixed：ブラウザのビューポートを基準に固定され、スクロールしても画面上の同じ位置に留まります。
  • sticky：スクロール位置に応じて、relativeとfixedの中間のような挙動を示します。

サンプルコード

次の例では、ボタンをクリックするとdiv要素のpositionが「relative」から「absolute」に変更されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 350px;
        height: 200px;
        background-color: orange;
        border: 3px solid red;
        position: relative;
        top: 20px;
      }
    </style>
  </head>
  <body>
    <p>ボタンをクリックすると、positionプロパティで配置方法が変更されます。</p>
    <button type="button" onclick="display()">位置を設定</button>

    <div id="box">
      <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
      <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
      <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
    </div>
    <br>
    <br>
    <script>
      function display() {
        document.getElementById("box").style.position = "absolute";
      }
    </script>
  </body>
</html>

実行結果の解説

初期状態では、#boxは「position: relative; top: 20px;」の指定により、通常の表示位置から20px下にずれて配置されています。

「位置を設定」ボタンをクリックすると、display()関数が実行され、document.getElementById("box").style.positionに「absolute」が代入されます。その結果、要素は文書フローから外れ、親要素を基準とした絶対配置へと切り替わります。このように、style.positionプロパティを操作するだけで、ユーザーの操作に応じた柔軟なレイアウト制御が可能になります。

  1. JavaScriptで要素のアウトラインの幅を設定する方法

    JavaScriptで要素の周りのアウトライン（外枠）の幅を設定するには、outlineWidthプロパティを使用します。「7px」のような値を指定することで、アウトラインの太さを自由にコントロールできます。outlineWidthプロパティとはoutlineWidthは、CSSのoutline-widthに対応するJavaScriptのスタイルプロパティです。アウトラインを実際に表示するには、あわせてoutlineStyle（線の種類）とoutlineColor（線の色）も設定する必要があります。なお、アウトラインはborder（境界線）と似ていますが、要素のサイズやレイアウトに影響を与えず

  2. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP