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

JavaScriptで4つのborder-radiusプロパティを一度にまとめて設定する方法

JavaScriptですべての角丸（border-radius）プロパティを設定するには、borderRadiusプロパティを使用します。このプロパティに値を代入するだけで、4つのコーナーそれぞれに個別に設定する代わりに、一度にまとめて指定することができます。

borderRadiusプロパティの仕組み

border-radiusには、左上・右上・右下・左下の4つのコーナーに対応する個別のプロパティ（border-top-left-radiusなど）が存在します。しかし、styleオブジェクトのborderRadiusプロパティを使えば、これらすべてを一括で設定できます。

値は1つから4つまで指定可能で、複数の値をスペースで区切ると、左上・右上・右下・左下の順に適用されます。値を1つだけ指定した場合は、4つすべてのコーナーに同じ値が適用されます。

サンプルコード

以下のコードを実行して、4つのborder-radiusプロパティを一度に設定する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid gray;
            width: 200px;
            height: 200px
         }
      </style>
   </head>
   <body>
      <div id="box">Demo Text</div>
      <br><br>
      <button type="button" onclick="display()">角丸を追加する</button>
      <script>
         function display() {
            document.getElementById("box").style.borderRadius = "20px";
         }
      </script>
   </body>
</html>

ボタンをクリックすると、display()関数が呼び出され、idが「box」の要素に対してborderRadiusに「20px」が設定されます。その結果、正方形だったボックスの4つのコーナーすべてが一度に丸くなります。

コーナーごとに異なる値を設定する場合

各コーナーに異なる値を適用したい場合は、値をスペースで区切って指定します。

document.getElementById("box").style.borderRadius = "10px 30px 50px 70px";

この場合、左上に10px、右上に30px、右下に50px、左下に70pxがそれぞれ適用され、非対称な角丸のデザインを作成できます。

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

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

  2. JavaScriptで1つの宣言ですべてのアウトラインプロパティを設定する方法

    要素にアウトライン（外枠線）を設定するには、CSSの outline プロパティを使用します。このプロパティを使うことで、アウトラインの色・スタイル・幅（オフセット）をまとめて指定できます。outlineプロパティの基本JavaScriptからは element.style.outline に対して値を代入することで、個別のプロパティ（outlineColor や outlineStyle など）を分けて指定する必要なく、1つの宣言だけですべてのアウトライン設定を一度に行えます。値は「幅 スタイル 色」の順で半角スペース区切りで記述します。サンプルコード以下のコードでは、ボタンをクリックすると