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

JavaScript DOMで左下隅の境界線の形状（角丸）を設定する方法

JavaScriptのDOM操作で要素の左下隅の境界線の形状を設定するには、borderBottomLeftRadiusプロパティを使用します。このプロパティに値を指定することで、左下の角に丸みを帯びた（角丸の）境界線を簡単に追加できます。

borderBottomLeftRadiusプロパティとは

borderBottomLeftRadiusは、CSSのborder-bottom-left-radiusに対応するJavaScriptのスタイルプロパティです。px、%などの単位で値を指定でき、数値が大きいほど角の丸みが強くなります。ボタンやカードなど、UI要素のデザインに欠かせないプロパティの一つです。

サンプルコード

以下のコードを実行して、JavaScriptで左下隅の角丸を設定する方法を確認してみましょう。ボタンをクリックすると、青色の破線で囲まれたボックスの左下の角が丸くなります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed blue;
            width: 120px;
            height: 120px;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">左下の角丸を設定</button>
      <div id="box">
         <p>デモテキスト</p>
         <p>デモテキスト</p>
      </div>
      <script>
         function display() {
            document.getElementById("box").style.borderBottomLeftRadius = "30px";
         }
      </script>
   </body>
</html>

コードの解説

ボタンがクリックされるとdisplay()関数が呼び出され、document.getElementById("box")でID「box」の要素を取得します。その後、style.borderBottomLeftRadiusに「30px」を設定することで、左下の角だけが30pxの半径で丸くなります。他の角はそのままのため、部分的な角丸表現が可能です。

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

    JavaScriptで要素の左ボーダー（左枠線）のスタイルを設定するには、borderLeftStyleプロパティを使用します。このプロパティに対して、solid（実線）やdashed（破線）など、適用したいボーダースタイルの値を指定します。指定できる主なスタイル値solid … 実線dashed … 破線dotted … 点線double … 二重線groove / ridge … 立体的な溝線・稜線inset / outset … 立体的な内側・外側の境界線none / hidden … ボーダーを非表示サンプルコード以下のコードを実行すると、ボタンをクリックしたときに左ボーダーのスタイル

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

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