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

HTML DOMのbackgroundOriginプロパティとは?使い方とサンプルコードを解説

backgroundOriginプロパティとは

background-originプロパティは、要素の背景(背景画像)の基準位置、すなわち相対的な位置を設定または取得するために使用されるプロパティです。CSSボックスモデルを構成する領域のうち、任意の場所を基準として背景を配置できます。

構文

backgroundOriginプロパティを設定する際の構文は以下のとおりです。

object.style.backgroundOrigin = "padding-box|border-box|content-box|initial|inherit"

プロパティの値

このプロパティに指定できる各値の意味は次のとおりです。

番号値と説明
1padding-box
背景画像をパディングボックス(余白領域)を基準に配置します。
これがデフォルト値です。
2border-box
背景画像をボーダーボックス(境界線を含む領域)を基準に配置します。
3content-box
背景画像をコンテンツボックス(内容領域)を基準に配置します。
4initial
このプロパティを初期値に設定します。
5inherit
親要素のプロパティ値を継承します。

サンプルコード

backgroundOriginプロパティを使った具体的な例を見てみましょう。このサンプルでは、ボタンをクリックするとdiv要素の背景の基準位置がcontent-boxからpadding-boxに変更され、その結果が画面に表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
    #DIV1 {
        margin: 20px;
        box-shadow: 0 0 5px black;
        padding: 30px;
        background: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
        background-origin: content-box;
        background-repeat: no-repeat;
        background-size: cover;
        font-size: 24px;
    }
    div>p {
        box-shadow: 0 0 5px darkgrey;
    }
</style>
<script>
    function changeBackOrigin(){
        document.getElementById("DIV1").style.backgroundOrigin="padding-box";
        document.getElementById("Sample").innerHTML="背景の基準位置がpadding-boxに設定されました";
    }
</script>
</head>
<body>
<h2>PowerBIチュートリアル</h2>
<div id="DIV1">
<p>PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!
PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!
PowerBIを学ぼう!PowerBIを学ぼう!PowerBIを学ぼう!</p>
</div>
<p>下のボタンをクリックして、上のdivの背景の基準位置を変更してみましょう</p>
<button onclick="changeBackOrigin()">CHANGE ORIGIN</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのbackgroundOriginプロパティとは?使い方とサンプルコードを解説

「CHANGE ORIGIN」ボタンをクリックすると、背景の基準位置がpadding-boxに変更され、表示が次のように切り替わります。

HTML DOMのbackgroundOriginプロパティとは?使い方とサンプルコードを解説

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri