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

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

JavaScriptで要素の境界線の色を設定するには？

JavaScriptで要素の境界線（ボーダー）の色を設定・変更するには、style.borderColor プロパティを使用します。このプロパティに任意の色の値を代入することで、ページを読み込んだ後でも動的に境界線の色を変更できます。

基本的な書き方

document.getElementById("box").style.borderColor = "green";

色の指定には、green のようなカラーネームのほか、#ff0000 のような16進数カラーコードや、rgb(0, 128, 0) のようなRGB形式も使用できます。

実行例

以下のコードを実行し、ボタンをクリックすると、黄色の破線だった境界線が緑色に変化します。実際に試して、borderColor プロパティの動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            height: 300px;
            width: 200px;
            border: thick dashed yellow;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
      </div>
      <br>
      <button type="button" onclick="display()">Set new color of border</button>
      <script>
         function display() {
            document.getElementById("box").style.borderColor = "green";
         }
      </script>
   </body>
</html>

コードのポイント

  • CSS側で border: thick dashed yellow; と初期スタイルを定義しています。
  • ボタンがクリックされると display() 関数が呼び出されます。
  • getElementById("box") で対象の要素を取得し、style.borderColor に "green" を設定することで、境界線の色だけが上書きされます。

このように、style.borderColor を使えば、CSSで設定した既存の境界線スタイル（太さや種類）を維持したまま、色のみを簡単に変更できます。

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