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

JavaScriptで要素のアウトラインの幅を設定する方法

JavaScriptで要素の周りのアウトライン（外枠）の幅を設定するには、outlineWidthプロパティを使用します。「7px」のような値を指定することで、アウトラインの太さを自由にコントロールできます。

outlineWidthプロパティとは

outlineWidthは、CSSのoutline-widthに対応するJavaScriptのスタイルプロパティです。アウトラインを実際に表示するには、あわせてoutlineStyle（線の種類）とoutlineColor（線の色）も設定する必要があります。

なお、アウトラインはborder（境界線）と似ていますが、要素のサイズやレイアウトに影響を与えず、要素の外側に描画されるという違いがあります。フォーカス表示などにも活用される便利なプロパティです。

サンプルコード

以下のコードでは、ボタンをクリックするとdiv要素に対してアウトラインの幅が適用されます。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 450px;
            background-color: orange;
            border: 3px solid red;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>下のボタンをクリックするとアウトラインの幅が設定されます。</p>
      <div id="box">
         <p>これはサンプルのdiv要素です。</p>
         <p>これはサンプルのdiv要素です。</p>
         <p>これはサンプルのdiv要素です。</p>
      </div>
      <br>
      <button type="button" onclick="display()">アウトラインの幅を設定</button>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.outlineColor = "#5F5F5F";
            document.getElementById("box").style.outlineStyle = "solid";
            document.getElementById("box").style.outlineWidth = "7px";
         }
      </script>
   </body>
</html>

コードのポイント

  • style.outlineWidth = "7px"：アウトラインの幅を7pxに設定します。
  • style.outlineStyle = "solid"：実線のアウトラインを指定します。この設定がないとアウトラインは表示されません。
  • style.outlineColor = "#5F5F5F"：アウトラインの色をグレーに設定します。

ボタンをクリックすると、オレンジ色のボックスの周りに7pxのグレーの実線アウトラインが表示されます。値を変更して、さまざまな太さや色を試してみましょう。

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

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

  2. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP