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

HTML DOMのborderTopStyleプロパティとは？構文・設定値・サンプルコードをわかりやすく解説

HTML DOMのborderTopStyleプロパティは、要素の上側（トップ）ボーダーのスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。

borderTopStyleプロパティの構文

borderTopStyleプロパティを設定する場合の基本的な構文は以下の通りです。

object.style.borderTopStyle = value

指定できる値の一覧

borderTopStyleプロパティには、以下の値を指定できます。

値説明
noneデフォルト値。ボーダーを表示しません。
hidden「none」とほぼ同じですが、ボーダーの領域自体は確保されます。実質的には透明ですが、スペースは存在したままになります。
dotted点線（ドット）のボーダーを定義します。
dashed破線（ダッシュ）のボーダーを定義します。
solid一本の実線のボーダーを定義します。
double二重線のボーダーを定義します。
groove3D風の溝（くぼみ）ボーダーを定義します。ridgeの逆の効果になります。
ridge3D風の隆起ボーダーを定義します。grooveの逆の効果になります。
inset3D風のくぼみ（inset）ボーダーを定義します。要素が押し込まれたように見える効果があります。
outset3D風の浮き出し（outset）ボーダーを定義します。要素が浮き上がって見える効果があります。
initialこのプロパティを初期値に設定します。
inherit親要素のプロパティ値を継承します。

borderTopStyleプロパティの使用例

ここでは、実際にborderTopStyleプロパティを使って、ボタンのクリックで上ボーダーのスタイルを変更するサンプルを見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        width:300px;
        height:100px;
        border-top: 8px solid dodgerblue;
        border-top-style: groove;
    }
</style>
<script>
    function changeTopStyle(){
        document.getElementById("DIV1").style.borderTopStyle="dashed";
        document.getElementById("Sample").innerHTML="上ボーダーのスタイルが変更されました";
    }
</script>
</head>
<body>
    <div id="DIV1">サンプルテキスト</div>
    <p>下のボタンをクリックすると、上のdivの上ボーダーのスタイルが変わります</p>
    <button onclick="changeTopStyle()">スタイルを変更</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

ページを表示すると、id「DIV1」のdiv要素には、幅8pxのdodgerblue色のgroove（溝）スタイルの上ボーダーが適用されています。

「スタイルを変更」ボタンをクリックすると、上ボーダーがdashed（破線）スタイルに変化し、メッセージが表示されます。

サンプルコードの解説

この例では、まずid「DIV1」を持つdiv要素を作成し、そのidに対してCSSスタイルを適用しています。スタイルでは主に上ボーダーの太さや種類を次のように指定しています。

#DIV1{
    width:300px;
    height:100px;
    border-top: 8px solid dodgerblue;
    border-top-style: groove;
}
<div id="DIV1">サンプルテキスト</div>

次に、ユーザーがクリックするとchangeTopStyle()メソッドが実行されるボタン「スタイルを変更」を作成しました。

<button onclick="changeTopStyle()">スタイルを変更</button>

changeTopStyle()メソッドでは、getElementById()を使ってid「DIV1」のdiv要素を取得し、そのborderTopStyleスタイルプロパティを「dashed」に設定しています。さらに、innerHTMLプロパティを使って、id「Sample」の段落に完了メッセージを表示することで、変更内容をユーザーに伝えています。

function changeTopStyle(){
    document.getElementById("DIV1").style.borderTopStyle="dashed";
    document.getElementById("Sample").innerHTML="上ボーダーのスタイルが変更されました";
}

このように、borderTopStyleプロパティを使えば、CSSを書き換えることなく、JavaScriptだけで要素の上ボーダーのスタイルを動的に制御することが可能です。ユーザーの操作に応じてデザインを切り替えたい場面などでぜひ活用してみてください。

  1. HTML DOMのborderStyleプロパティとは？使い方と設定できる値を徹底解説

    borderStyleプロパティとはHTML DOMのborderStyleプロパティは、要素のボーダー（枠線）スタイルを一括で取得・設定できるショートハンド（省略記法）です。1〜4個の値を指定でき、指定した値の数によって以下のようにスタイルが適用されます。値を4つ指定した場合 … 上 → 右 → 下 → 左の順（時計回り）にそれぞれのボーダースタイルが適用されます。値を1つだけ指定した場合 … 4つの辺すべてに同じスタイルが適用されます。値を2つ指定した場合 … 1番目の値が上下に、2番目の値が左右に適用されます。構文borderStyleプロパティを設定する際の基本的な構文は次のとおりです

  2. HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説

    HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文 右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。 値説明 noneデフォルト値。ボーダーを表示しませ