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

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

borderBottomWidthプロパティは、HTML要素の下ボーダー（境界線）の幅を設定または取得するために使用されるCSSスタイルプロパティです。JavaScriptから動的にボーダーの太さを制御したい場合に活用できます。

構文

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

object.style.borderBottomWidth = "thin|medium|thick|length|initial|inherit"

プロパティ値の一覧

borderBottomWidthプロパティに指定できる値とその説明は以下の表の通りです。

番号値と説明
1thin
細いボーダーを指定します。
2medium
中程度の太さのボーダーを指定します。デフォルト値です。
3thick
太いボーダーを指定します。
4length
pxやemなどの長さの単位を使って、ボーダーの幅を数値で指定します。
5initial
このプロパティを初期値（デフォルト値）に戻します。
6inherit
親要素のプロパティ値を継承します。

コード例

ここでは、borderBottomWidthプロパティを使って、ボタンのクリック時にdiv要素の下ボーダーの幅を変更する具体例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1{
        height: 100px;
        width: 200px;
        border: 10px groove orange;
        padding: 10px;
        border-bottom-width:30px;
    }
</style>
<script>
    function changeBottomWidth(){
        document.getElementById("DIV1").style.borderBottomWidth="1px";
        document.getElementById("Sample").innerHTML="下ボーダーの幅が細くなりました";
    }
</script>
</head>
<body>
<div id="DIV1">サンプルテキスト</div>
<p>下のボタンをクリックすると、上のdivの下ボーダーの幅が変更されます</p>
<button onclick="changeBottomWidth()">下ボーダーの幅を変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、最初はCSSで指定した30pxの太い下ボーダーが表示されます。

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

「下ボーダーの幅を変更」ボタンをクリックすると、JavaScriptによって下ボーダーの幅が1pxに変更され、表示も更新されます。

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

まとめ

borderBottomWidthプロパティを使用することで、要素の下ボーダーの幅をキーワード（thin / medium / thick）や具体的な長さの単位で柔軟に制御できます。ユーザーの操作に応じてスタイルを動的に変更したい場合など、インタラクティブなWebページの作成に役立つ便利なプロパティです。

  1. HTML DOM の boxSizing プロパティとは？使い方と設定値を解説

    HTML DOM の boxSizing プロパティは、要素全体の幅と高さをどのように計算するかを指定するために使用されます。値として「border-box」または「content-box」を指定できます。このプロパティを理解することで、padding（パディング）や border（ボーダー）を含めたレイアウトの計算方法を自由にコントロールできるようになり、レスポンシブデザインなどでも非常に役立ちます。 構文 boxSizing プロパティを設定する構文は以下のとおりです。 object.style.boxSizing = content-box|border-box|initial|inhe

  2. HTML DOM の borderWidth プロパティの使い方を解説

    HTML DOM の borderWidth プロパティとはHTML DOM の borderWidth プロパティは、要素の境界線（ボーダー）の幅を取得・設定するためのショートハンド（省略記法）です。値は 1 つから 4 つまで指定でき、指定した値の数に応じて以下のように解釈されます。値を 4 つ指定した場合：上・右・下・左の順（時計回り）に境界線の幅が適用されます。値を 1 つだけ指定した場合：4 つの境界線すべてに同じ幅が適用されます。値を 2 つ指定した場合：上下に 1 つ目の値、左右に 2 つ目の値が適用されます。構文borderWidth プロパティを設定する際の構文は以下のとおり