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

HTMLDOMスタイルborderImageSourceプロパティ

HTML DOM borderImageSourceプロパティは、要素の境界線画像として使用される画像のソースを設定または返すために使用されます。

以下は、-

の構文です。

borderImageSourceプロパティの設定-

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

上記の特性は次のように説明されます-

値 説明
なし これは、画像が使用されないことを意味します。指定されている場合は、境界線スタイルが適用されます。
画像 境界線として使用する画像のパスを指定します。
境界線として使用される画像へのパス
病気 ボーダー画像中央部の保存に使用します。
初期 このプロパティをデフォルト値に設定します。
継承 親プロパティ値を継承します。

borderImageSourceプロパティの例を見てみましょう-

例

<!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="The border image is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>

出力

HTMLDOMスタイルborderImageSourceプロパティ

「境界線の画像を変更」をクリックすると ボタン-

HTMLDOMスタイルborderImageSourceプロパティ

上記の例では-

対応するcssスタイルが適用され、テキストが含まれているID「DIV1」のdivを作成しました。 cssスタイルのborder-image-sourceプロパティを使用して境界線画像を指定し、画像のURLをプロパティ値-

として指定しました。 
#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">This is some sample text inside div</div>

次に、「境界線の画像を変更」ボタンを作成しました 」は、ユーザーがクリックするとchangeBorderImage（）メソッドを実行します-

<button onclick="changeBorderImage()">Change Border Image</button>

changeBorderImage（）は、getElementById（）メソッドを使用してDIV1要素を取得し、そのborderImageSourceプロパティ値を取得します。次に、urlメソッドでurl値を割り当てることにより、画像のurlを割り当てます。次に、innerHTMLプロパティ-

を使用して、IDが「Sample」の段落にこの変更を示す目的のメッセージを表示します。 
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="The border image is now changed";
}

  1. HTMLDOMスタイルborderRightStyleプロパティ

    HTML DOM borderRightStyleプロパティは、要素の正しい境界線スタイルを設定または返すために使用されます。 以下は、-の構文です。 borderRightStyleプロパティの設定- object.style.borderRightStyle = value 上記の特性は次のように説明されます- 値 説明 なし これは、境界線なしを指定するデフォルト値です。 非表示 これは「none」と同じですが、境界スペースを取ります。基本的には透明ですが、まだそこにあります。 点線 これは点線の境界線を定義します。 破線 これは破線の境界線を定義します

  2. HTMLDOMスタイルフィルタープロパティ

    HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。 以下は、-の構文です。 フィルタプロパティの設定- object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()" 上記のプロパティ値は次のように説明されます- フィルター 説明 なし これは効果を指定しま