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

JavaScriptで要素のボーダー（境界線）のスタイルを設定する方法

要素の境界線（ボーダー）のスタイルを設定するには、JavaScriptの borderStyle プロパティを使用します。このプロパティに「solid」「dashed」「dotted」などの値を指定することで、ボーダーの見た目を動的に変更できます。

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときにdiv要素のボーダースタイルが「dashed（破線）」に変化します。実際に試してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #newDiv {
            height: 150px;
            width: 150px;
            border: 2px solid #000000;
         }
      </style>
   <body>
      <div id="newDiv">
         Demo Content!
      </div>
      <br>
      <button type="button" onclick="display()">Change border style</button>
      <script>
         function display() {
            document.getElementById("newDiv").style.borderStyle = "dashed";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、まずCSSで #newDiv に対して幅・高さ150px、実線（solid）の黒いボーダーを設定しています。

次に、ボタンがクリックされると display() 関数が呼び出され、document.getElementById("newDiv").style.borderStyle = "dashed"; の処理によって、ボーダーのスタイルが実線から破線へと切り替わります。

borderStyle プロパティには、solid（実線）、dashed（破線）、dotted（点線）、double（二重線）、none（なし）などの値を指定できます。用途に応じて使い分けることで、ページ上の要素を柔軟に装飾できます。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで要素の周囲のアウトライン（外枠）スタイルを設定する方法

    要素のアウトライン（輪郭線）のスタイルを設定するには、JavaScriptの outlineStyle プロパティを使用します。このプロパティを使うことで、実線（solid）・点線（dotted）・破線（dashed）など、さまざまな種類のアウトラインを動的に適用できます。 主なoutlineStyleの値 solid … 実線 dotted … 点線 dashed … 破線 double … 二重線 none … アウトラインなし（初期値） また、アウトラインの色は outlineColor プロパティ、太さは outlineWidth プロパティで個別に指定できます。 サンプルコード