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

JavaScriptで左ボーダーの色を設定する方法

JavaScriptで要素の左ボーダー（左境界線）の色を設定するには、borderLeftColor プロパティを使用します。このプロパティに対して、ボーダーに適用したい色を指定するだけで、簡単に変更できます。

基本的な使い方

次のように、対象要素の style.borderLeftColor に任意の色（カラーネームやカラーコード）を代入します。

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

サンプルコード

実際に動作を確認できるサンプルを用意しました。ボタンをクリックすると、左ボーダーの色が緑色に変化します。以下のコードをそのままHTMLファイルに保存して実行してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: thick solid gray;
         }
      </style>
   </head>
   <body>
      <div id="box">デモテキスト</div>
      <br><br>
      <button type="button" onclick="display()">左ボーダーの色を変更</button>
      <script>
         function display() {
            document.getElementById("box").style.borderLeftColor = "green";
         }
      </script>
   </body>
</html>

補足ポイント

色の指定には「green」のようなカラーネーム以外にも、「#00ff00」のような16進数カラーコードや、「rgb(0, 255, 0)」といったRGB値も使用できます。また、上・右・下のボーダーの色を個別に変更したい場合は、それぞれ borderTopColor、borderRightColor、borderBottomColor プロパティを同様の方法で使うことで対応可能です。

  1. JavaScriptで左ボーダーのスタイルを設定する方法を解説

    JavaScriptで要素の左ボーダー（左枠線）のスタイルを設定するには、borderLeftStyleプロパティを使用します。このプロパティに対して、solid（実線）やdashed（破線）など、適用したいボーダースタイルの値を指定します。指定できる主なスタイル値solid … 実線dashed … 破線dotted … 点線double … 二重線groove / ridge … 立体的な溝線・稜線inset / outset … 立体的な内側・外側の境界線none / hidden … ボーダーを非表示サンプルコード以下のコードを実行すると、ボタンをクリックしたときに左ボーダーのスタイル

  2. JavaScriptで要素の左マージン（余白）を設定する方法

    JavaScriptで要素の左マージンを設定するには、style.marginLeftプロパティを使用します。このプロパティに「80px」のような値を代入することで、指定した要素の左側に任意の幅の余白を簡単に追加できます。基本構文document.getElementById(要素のID).style.marginLeft = 80px;サンプルコード以下の例では、ボタンをクリックすると段落テキストの左マージンが80pxに設定されます。実際にブラウザで実行して動作を確認してみてください。<!DOCTYPE html> <html>    <bo