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

JavaScriptで下ボーダー（境界線）の幅を設定する方法

要素の下ボーダーの幅を変更したい場合は、JavaScriptの borderBottomWidth プロパティを使用します。このプロパティを使えば、ピクセル値などを指定して下ボーダーの太さを動的に設定できます。

なお、ボーダーの幅を指定する際は、あらかじめボーダーのスタイル（borderBottomStyle）が設定されている必要がある点に注意してください。スタイルが未指定の場合、ボーダー自体が表示されません。

サンプルコード

以下のコードでは、ボタンをクリックすると borderBottomStyle で破線スタイルを設定し、borderBottomWidth で下ボーダーの幅を5pxに変更しています。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <div id="box">デモテキスト</div>
      <br>
      <button onclick="display()">クリックして下ボーダーの幅を設定</button>
      <script>
         function display() {
            document.getElementById("box").style.borderBottomStyle = "dashed";
            document.getElementById("box").style.borderBottomWidth = "5px";
         }
      </script>
   </body>
</html>

ポイント解説

  • borderBottomWidth：下ボーダーの幅を「px」「em」などの単位で指定します。
  • borderBottomStyle：ボーダーの種類（dashed、solid、dotted など）を指定します。幅を設定する前に必ず指定しましょう。

上記の4辺すべての幅を一括で変更したい場合は、borderWidth プロパティを使用する方法もあります。

  1. JavaScriptで左ボーダーの色を設定する方法

    JavaScriptで要素の左ボーダー（左境界線）の色を設定するには、borderLeftColor プロパティを使用します。このプロパティに対して、ボーダーに適用したい色を指定するだけで、簡単に変更できます。基本的な使い方次のように、対象要素の style.borderLeftColor に任意の色（カラーネームやカラーコード）を代入します。document.getElementById(box).style.borderLeftColor = green;サンプルコード実際に動作を確認できるサンプルを用意しました。ボタンをクリックすると、左ボーダーの色が緑色に変化します。以下のコードをその

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

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