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

HTML DOMのborderImageSourceプロパティは、要素のボーダー（境界線）として使用する画像のソースを設定または取得するために使用されるプロパティです。CSSのborder-image-sourceに対応しており、JavaScriptから動的にボーダー画像を変更したい場合に活用できます。

borderImageSourceプロパティの構文

borderImageSourceプロパティを設定する際の基本構文は以下の通りです。

object.style.borderImageSource = "none|image|initial|inherit"

指定できる値の一覧

値	説明
none	画像を使用しません。ボーダースタイルが別途指定されている場合は、そのスタイルが適用されます。
image	ボーダーとして使用する画像へのパス（URL）を指定します。`url()`関数で囲んで記述します。
fill	ボーダー画像の中間部分（中央領域）を保持して表示するために使用されます。
initial	このプロパティをデフォルト値に設定します。
inherit	親要素のプロパティ値を継承します。

borderImageSourceプロパティの使用例

ここでは、ボタンをクリックするとdiv要素のボーダー画像が切り替わる簡単なサンプルを紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1 {
        width: 400px;
        margin: 15px;
        padding: 10px;
        border: 20px solid transparent;
        border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
        border-image-slice: 30;
    }
</style>
<script>
    function changeBorderImage(){
        document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
        document.getElementById("Sample").innerHTML="ボーダー画像が変更されました";
    }
</script>
</head>
<body>
<div id="DIV1">これはdiv内のサンプルテキストです</div>
<p>下のボタンをクリックして、上のdivのボーダー画像を変更してください</p>
<button onclick="changeBorderImage()">ボーダー画像を変更</button>
<p id="Sample"></p>
</body>
</html>

「ボーダー画像を変更」ボタンをクリックすると、div要素のボーダー画像が別の画像に切り替わります。

サンプルコードの解説

この例では、以下のような仕組みでボーダー画像を動的に変更しています。

1. CSSで初期のボーダー画像を指定

idが「DIV1」のdiv要素に対してCSSスタイルを適用し、border-image-sourceプロパティでボーダー画像のURLを指定しています。あわせてborder-image-sliceで画像の分割範囲も指定しています。

#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
<div id="DIV1">これはdiv内のサンプルテキストです</div>

2. クリックイベントで関数を実行するボタンを作成

次に、「ボーダー画像を変更」ボタンを作成します。ユーザーがこのボタンをクリックすると、changeBorderImage()関数が実行されます。

<button onclick="changeBorderImage()">ボーダー画像を変更</button>

3. JavaScriptでボーダー画像を差し替え

changeBorderImage()関数では、getElementById()メソッドを使ってDIV1要素を取得し、そのborderImageSourceプロパティに新しい画像URLをurl()形式で代入します。その後、idが「Sample」の段落要素のinnerHTMLプロパティを使って、変更が完了したことを示すメッセージを表示しています。

function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="ボーダー画像が変更されました";
}

まとめ

borderImageSourceプロパティを使えば、JavaScriptから要素のボーダー画像を動的に制御できます。デザインの切り替えやインタラクティブな演出など、ユーザーの操作に応じて見た目を変化させたい場面でぜひ活用してみてください。なお、実際にボーダー画像を正しく表示するには、border-image-sliceなどの関連プロパティとの組み合わせも重要になります。

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

HTML DOMのborderImageSliceプロパティとは？構文と使い方を徹底解説

HTML DOMのborderRightStyleプロパティとは？使い方と設定値を徹底解説
HTML DOMのborderRightStyleプロパティは、要素の右側ボーダー（境界線）のスタイルを設定、または取得するために使用されるプロパティです。JavaScriptから動的にボーダーの見た目を変更したい場合に活用できます。 borderRightStyleプロパティの構文右ボーダーのスタイルを設定する場合の構文は以下のとおりです。 object.style.borderRightStyle = value 指定できる値の一覧 borderRightStyleプロパティに指定できる主な値とその説明は次の表のとおりです。値説明 noneデフォルト値。ボーダーを表示しませ
【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説
HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。構文 filterプロパティを設定する際の基本構文は以下の通りです。 object.style.filter = none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | satu