JavaScriptで下ボーダーの色を設定する方法｜borderBottomColorプロパティの使い方

JavaScriptを使って要素の下側の境界線（ボーダー）の色を変更したい場合は、borderBottomColorプロパティを使用します。このプロパティはCSSのborder-bottom-colorに対応しており、上下左右すべてのボーダーではなく、下側のボーダーの色だけを個別に設定できるのが特徴です。

基本構文

borderBottomColorプロパティは、次のように記述します。

object.style.borderBottomColor = "色の値";

色の値には、yellowや#ff0000のようなキーワード・カラーコードのほか、rgb(255, 0, 0)形式の値も指定できます。

サンプルコード

以下の例では、青い破線ボーダーを持つボックスを用意し、ボタンをクリックすると下ボーダーの色だけが黄色に変わります。実際に実行して挙動を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed blue;
            width: 120px;
            height: 120px;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">下ボーダーの色を設定する</button>
      <div id="box">
         <p>デモテキスト</p>
         <p>デモテキスト</p>
      </div>
      <script>
         function display() {
            document.getElementById("box").style.borderBottomColor = "yellow";
         }
      </script>
   </body>
</html>

コードの解説

CSSでの初期スタイル： #boxに対してborder: 2px dashed blue;を指定し、全周に青い破線ボーダーを設定しています。
ボタンのクリックイベント： ボタンのonclick属性からdisplay()関数を呼び出します。
色の変更処理： document.getElementById("box")で対象要素を取得し、style.borderBottomColorに"yellow"を代入することで、下ボーダーの色のみが黄色に変化します。

注意点

ボーダーの色を設定しても、border-styleがnoneになっていると境界線自体が表示されず、色の変更も確認できません。あらかじめsolidやdashedなど、表示されるスタイルを指定しておきましょう。

JavaScriptで下ボーダーの色を設定する方法｜borderBottomColorプロパティの使い方

基本構文

サンプルコード

コードの解説

注意点

関連プロパティ