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

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

JavaScriptで要素の左ボーダー（左枠線）のスタイルを設定するには、borderLeftStyleプロパティを使用します。このプロパティに対して、solid（実線）やdashed（破線）など、適用したいボーダースタイルの値を指定します。

指定できる主なスタイル値

  • solid … 実線
  • dashed … 破線
  • dotted … 点線
  • double … 二重線
  • groove / ridge … 立体的な溝線・稜線
  • inset / outset … 立体的な内側・外側の境界線
  • none / hidden … ボーダーを非表示

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときに左ボーダーのスタイルが変化する様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid gray;
            width: 300px;
            height: 300px;
         }
      </style>
   </head>
   <body>
      <div id="box">デモテキスト</div>
      <br><br>
      <button type="button" onclick="display()">左ボーダーのスタイルを変更</button>
      <script>
         function display() {
            document.getElementById("box").style.borderLeftStyle = "dashed";
         }
      </script>
   </body>
</html>

このサンプルでは、あらかじめCSSで太いグレーの実線ボーダーを設定したボックスに対し、ボタンクリック時にstyle.borderLeftStyleへ"dashed"を代入することで、左ボーダーだけが破線に変わります。同様の手法は、上ボーダーならborderTopStyle、右ボーダーならborderRightStyle、下ボーダーならborderBottomStyleにも応用できます。

  1. JavaScriptで要素の左マージン（余白）を設定する方法

    JavaScriptで要素の左マージンを設定するには、style.marginLeftプロパティを使用します。このプロパティに「80px」のような値を代入することで、指定した要素の左側に任意の幅の余白を簡単に追加できます。基本構文document.getElementById(要素のID).style.marginLeft = 80px;サンプルコード以下の例では、ボタンをクリックすると段落テキストの左マージンが80pxに設定されます。実際にブラウザで実行して動作を確認してみてください。<!DOCTYPE html> <html>    <bo

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

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