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

HTML DOM スタイルの borderImage プロパティとは？使い方を解説

borderImageプロパティとは

borderImageプロパティは、HTML要素のボーダー画像（border-image）を設定または取得するために使用されるJavaScriptのスタイルプロパティです。ショートハンド（一括指定）プロパティであるため、borderImageSource、borderImageSlice、borderImageWidth、borderImageOutset、borderImageRepeatという5つの個別プロパティの値を、一度にまとめて操作することができます。

構文

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

【borderImageプロパティの設定】

object.style.borderImage = "source slice width outset repeat|initial|inherit"

プロパティの値

borderImageプロパティに指定できる主な値は、以下の表のとおりです。

番号値と説明
1borderImageSource
ボーダーとして使用する画像のパスを指定します。
2borderImageSlice
画像ボーダーの内側へのオフセット（切り分け位置）を指定します。
3borderImageWidth
画像ボーダーの幅を指定します。
4borderImageOutset
ボーダー画像領域がボーダーボックスから外側へはみ出す量を指定します。
5borderImageRepeat
画像ボーダーを丸めて表示（round）、繰り返し表示（repeat）、引き伸ばして表示（stretch）のいずれにするかを指定します。
6initial
このプロパティを初期値に設定します。
7inherit
親要素のプロパティ値を継承します。

サンプルコード

それでは、borderImageプロパティを使用した具体的な例を見てみましょう。この例では、段落要素に適用されたボーダー画像を、ボタンのクリック操作で別の画像に動的に変更します。

<!DOCTYPE html>
<html>
<head>
<style>
    #PARA1 {
        border: 15px solid transparent;
        padding: 12px;
        border-image: url("https://www.tutorialspoint.com/images/blockchain.png") 20 stretch;
        width: 100px;
    }
</style>
<script>
    function changeBorderImage(){
        document.getElementById("PARA1").style.borderImage="url('https://www.tutorialspoint.com/images/mongodb.png') 20 round";
        document.getElementById("Sample").innerHTML="The border image is now changed";
    }
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p id="PARA1">This is a sample paragraph. Here is another line</p>
<p>Change the above paragraph border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>

コードの解説

このコードでは、id属性「PARA1」が付いた段落要素に対して、透明な15pxのボーダーとpaddingを設定し、CSSのborder-imageプロパティによって画像をスライス幅20・stretch表示で適用しています。ボタンがクリックされるとchangeBorderImage()関数が呼び出され、style.borderImageの値を別の画像URLとround表示に書き換えることで、ボーダー画像が動的に変化します。同時に、id「Sample」の段落にメッセージが表示されます。

実行結果

このコードを実行すると、次のように表示されます。

HTML DOM スタイルの borderImage プロパティとは？使い方を解説

「Change Border Image」ボタンをクリックすると、ボーダー画像が新しいものに切り替わり、次のように表示されます。

HTML DOM スタイルの borderImage プロパティとは？使い方を解説

  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デフォルト値。ボーダーを表示しませ