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

HTML DOMのborderLeftColorプロパティとは？使い方をサンプルコードで解説

HTML DOMのborderLeftColorプロパティは、要素の左ボーダー（左境界線）の色を取得または設定するために使用されるプロパティです。JavaScriptを使って動的に左ボーダーの色を変更したい場合に活用できます。

borderLeftColorプロパティの構文

borderLeftColorプロパティを設定する際の構文は以下のとおりです。

object.style.borderLeftColor = "color|transparent|initial|inherit"

設定できる値

borderLeftColorプロパティに指定できる各値の意味は以下のとおりです。

値説明
color左ボーダーの色を指定します。デフォルトの色は黒に設定されています。
transparent左ボーダーの色を透明にします。背後にあるコンテンツが透けて見えるようになります。
initialこのプロパティをデフォルト値に設定します。
inherit親要素のプロパティ値を継承します。

それでは、borderLeftColorプロパティの具体的な使用例を見ていきましょう。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1{
        border-left:solid 8px;
        border-left-color: orange;
    }
</style>
<script>
    function changeBorderLeft(){
        document.getElementById("IMG1").style.borderLeftColor="lightgreen";
        document.getElementById("Sample").innerHTML="左ボーダーの色が緑色に変更されました";
    }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg">
<p>下のボタンをクリックすると、上の画像の左ボーダーの色が変わります</p>
<button onclick="changeBorderLeft()">ボーダーの色を変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

ページを表示すると、画像の左側にオレンジ色の8pxの実線ボーダーが表示されます。

「ボーダーの色を変更」ボタンをクリックすると、左ボーダーの色が薄い緑色（lightgreen）に変化します。

コードの解説

このサンプルコードの仕組みを順番に見ていきます。

1. CSSスタイルの適用

まず、id「IMG1」を持つ画像要素に対してCSSスタイルを適用しています。このスタイルでは、左ボーダーのスタイル（実線・8px）と左ボーダーの色（オレンジ）を指定しています。

#IMG1 {
    border-left:solid 8px;
    border-left-color: orange;
}
<img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg">

2. ボタンの設置

次に、「ボーダーの色を変更」という名前のボタンを作成しています。ユーザーがこのボタンをクリックすると、changeBorderLeft()メソッドが実行されます。

<button onclick="changeBorderLeft()">ボーダーの色を変更</button>

3. JavaScriptによる色の変更処理

changeBorderLeft()メソッドでは、getElementById()メソッドを使ってid「IMG1」の<img>要素を取得し、そのborderLeftColorスタイルプロパティを「lightgreen」に設定しています。これにより左ボーダーの色が薄い緑色に変更され、同時にinnerHTMLプロパティを使って、id「Sample」の段落に変更完了のメッセージが表示されます。

function changeBorderLeft(){
    document.getElementById("IMG1").style.borderLeftColor="lightgreen";
    document.getElementById("Sample").innerHTML="左ボーダーの色が緑色に変更されました";
}

このように、borderLeftColorプロパティを使えば、ユーザーの操作に応じて要素の左ボーダーの色を動的に変更することができます。ボタンクリックだけでなく、マウスオーバーやフォーム入力などのイベントと組み合わせることで、よりインタラクティブなWebページを作成できます。

  1. HTML DOMのborderRightColorプロパティとは？右ボーダーの色を操作する方法を解説

    HTML DOMのborderRightColorプロパティは、要素の右ボーダーの色を取得・設定するために使用されるスタイルプロパティです。JavaScriptから動的にボーダーの色を変更したい場合に活用できます。 borderRightColorプロパティの構文 borderRightColorプロパティを設定する場合の構文は以下のとおりです。 object.style.borderRightColor = color|transparent|initial|inherit 指定できる値の一覧 このプロパティには、以下の4つの値を指定できます。 値説明 color右ボーダーの色を

  2. HTML DOMのstyle.colorプロパティとは？使い方とサンプルコードを解説

    HTML DOMのstyle.colorプロパティは、要素内のテキストの色を取得（get）および設定（set）するために使用されるプロパティです。テキストの色は、以下のいずれかの形式で指定できます。16進数カラーコード（例：#ff0000）rgb() 関数（例：rgb(255,0,0)）rgba() 関数（透明度を含む指定）hsl() 関数（色相・彩度・輝度による指定）hsla() 関数（透明度を含むHSL指定）定義済みのカラーキーワード（例：red、blue、green など）style.colorプロパティの構文colorプロパティを設定する際の基本的な構文は次のとおりです。object.