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

JavaScriptのDOMで右下コーナーの境界線の形状を設定する方法

JavaScriptで要素の右下コーナーの境界線の形状を設定したい場合は、borderBottomRightRadiusプロパティを使用します。このプロパティを使うことで、角を丸くした（角丸の）境界線を簡単に実現できます。

使い方の例

以下のコードを実行すると、ボタンをクリックしたときにボックスの右下コーナーが丸くなる様子を確認できます。

<!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.borderBottomRightRadius = "30px";
      }
    </script>
  </body>
</html>

コードの解説

上記の例では、青色の破線ボーダーを持つ120×120ピクセルのボックスを用意しています。ボタンをクリックするとdisplay()関数が呼び出され、document.getElementById("box").style.borderBottomRightRadius = "30px";によって、IDが「box」の要素の右下コーナーの半径が30ピクセルに設定されます。その結果、右下の角だけが滑らかに丸まった形状に変化します。

なお、値は「px」だけでなく「%」や「em」などの単位でも指定可能です。また、CSSのborder-bottom-right-radiusと同様に、楕円形の角丸を作りたい場合は「30px 50px」のように水平方向と垂直方向の半径をスペース区切りで指定することもできます。

  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;サンプルコード実際に動作を確認できるサンプルを用意しました。ボタンをクリックすると、左ボーダーの色が緑色に変化します。以下のコードをその