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

JavaScriptでアウトラインの色を設定・変更する方法

JavaScriptで要素のアウトライン（輪郭線）の色を設定するには、outlineColorプロパティを使用します。このプロパティを活用すれば、ユーザーの操作に応じてアウトラインの色を動的に変更することができます。

サンプルコード

以下のコードでは、ボタンをクリックするとdiv要素のアウトラインの色が変化します。実際にブラウザで実行して、outlineColorプロパティの動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
      #box {
         border: 2px solid red;
      }
      </style>
   </head>
   
   <body>
      <div id = "box">
         デモコンテンツ
      </div>
      <br>
      
      <button type = "button" onclick = "display()">アウトラインの色を変更</button>
      <script>
         function display() {
            document.getElementById("box").style.outlineColor = "#FF5733";
            document.getElementById("box").style.outline = "2px solid";
         }
      </script>
   </body>
</html>

コードの解説

このコードでは、id属性が「box」のdiv要素に対して、あらかじめCSSで赤い枠線（border）を設定しています。ボタンがクリックされるとdisplay()関数が呼び出され、style.outlineColorによってアウトラインの色が「#FF5733」（オレンジ系の色）に変更されます。同時にstyle.outlineで太さとスタイルを「2px solid」に指定しているため、クリックした瞬間にはっきりとしたアウトラインが表示される仕組みです。

なお、outlineColorプロパティを単独で使用した場合、アウトラインの太さやスタイルが未指定だと色が表示されないことがあります。そのため、上記の例のようにoutlineプロパティで太さとスタイルを一緒に設定しておくのが確実です。

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

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

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

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