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

HTML DOMのborderTopColorプロパティの使い方を徹底解説

HTML DOMのborderTopColorプロパティは、要素の上境界線（トップボーダー）の色を取得または設定するために使用されます。JavaScriptから動的にボーダーの色を変更したい場合に非常に便利なプロパティです。

構文

borderTopColorプロパティを設定する際の基本的な構文は以下のとおりです。

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

設定できる値

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

borderTopColorプロパティの使用例

それでは、実際のコード例を見てみましょう。以下の例では、ボタンをクリックすると画像の上境界線の色がオレンジから青に変化します。

<!DOCTYPE html>
<html>
<head>
<style>
    #IMG1 {
        border-top:solid 8px;
        border-top-color: orange;
    }
</style>
<script>
    function changeBorderTop(){
        document.getElementById("IMG1").style.borderTopColor="blue";
        document.getElementById("Sample").innerHTML="上境界線の色が青に変更されました";
    }
</script>
</head>
<body>
    <img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg">
    <p>下のボタンをクリックして、上の画像の上境界線の色を変更してください</p>
    <button onclick="changeBorderTop()">ボーダーの色を変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

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

「ボーダーの色を変更」ボタンをクリックすると、以下のように上境界線の色が青に変わります。

コードの解説

この例では、まずid「IMG1」を持つimg要素を作成し、CSSスタイルを適用しています。このスタイルでは、上境界線のスタイル（solid 8px）と上境界線の色（orange）を指定しています。

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

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

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

changeBorderTop()メソッドでは、getElementById()メソッドを使ってid「IMG1」のimg要素を取得し、そのborderTopColorスタイルプロパティを「blue」に設定しています。これにより上境界線の色が青に変更され、innerHTMLプロパティを使ってid「Sample」の段落にその変更内容が表示されます。

function changeBorderTop(){
    document.getElementById("IMG1").style.borderTopColor="blue";
    document.getElementById("Sample").innerHTML="上境界線の色が青に変更されました";
}

まとめ

borderTopColorプロパティを使えば、JavaScriptだけで要素の上境界線の色を簡単に操作できます。色名（blue、redなど）のほか、カラーコード（#0000ffなど）やrgb()関数も指定できるため、動的なUI表現の幅が大きく広がります。同様に、borderBottomColor、borderLeftColor、borderRightColorなどのプロパティも存在するので、合わせて覚えておくと良いでしょう。

  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.