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

JavaScriptで下ボーダーのスタイルを設定する方法

JavaScriptで下ボーダーのスタイルを設定するには？

JavaScriptで要素の下ボーダー（下枠）のスタイルを設定するには、borderBottomStyleプロパティを使用します。このプロパティはCSSのborder-bottom-styleに対応しており、ページを読み込んだ後でも動的にボーダーを追加したり、スタイルを変更したりすることができます。

主なスタイルの値

  • solid：一本の実線
  • dashed：破線
  • dotted：点線
  • double：二重線
  • groove / ridge / inset / outset：立体感のある装飾的なボーダー
  • none：ボーダーを非表示にする

サンプルコード

以下のコードでは、ボタンをクリックするとdiv要素の下ボーダーが「dashed（破線）」に設定されます。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <div id="box">Demo Text</div>
      <br>
      <button onclick="display()">Click to set style of bottom border</button>
      <script>
         function display() {
            document.getElementById("box").style.borderBottomStyle = "dashed";
         }
      </script>
   </body>
</html>

この例のように、document.getElementById()で対象の要素を取得し、そのstyle.borderBottomStyleに任意の値を代入するだけで、下ボーダーのスタイルを簡単に変更できます。なお、ボーダーを見た目として明確に表示したい場合は、あわせてborderBottomWidthやborderBottomColorも設定するとより効果的です。

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

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

  2. CSSで境界線（ボーダー）のスタイルを設定する方法

    CSSで要素の境界線（ボーダー）のスタイルを設定するには、border-style プロパティを使用します。このプロパティにより、以下のようなさまざまなスタイルから好みのボーダーを選択できます。 border-styleで指定できる主な値 none： 境界線を表示しません。 solid： 1本の実線で表示されます。 dotted： 点線（ドットの連続）で表示されます。 dashed： 破線（短い線分の連続）で表示されます。 double： 2本の実線で表示されます。 groove： ページに刻み込まれたような凹凸のある立体的な線で表示されます。 ridge： grooveの逆で、盛り上がって