HTMLDOMスタイルbackgroundPositionプロパティ
backgroundPositionプロパティは、原点を基準にした要素の背景画像の初期位置を設定または取得するために使用されます。
構文
以下は、-
の構文です。backgroundPositionプロパティの設定-
object.style.backgroundPosition = value
値
以下は値です-
| 値 | 説明 |
|---|---|
| 左上 トップセンター 右上 中道左派 センターセンター 中央右 左下 中央下 右下 | 位置は名前で理解できます。 1つの値のみを書き込む場合、もう1つは常に中央になります。 |
| xpos ypos | 水平（x）および垂直位置（y）を示します。左上隅から0,0で始まります。ユニットとしてはピクセルが推奨されますが、他のCSSユニットも使用できます。 |
| x％y％ | 水平（x）および垂直（y）位置の位置をパーセンテージで指定します。左上から0％0％、右下のコルネット100％100％から始まります。一方の値を指定すると、もう一方が中央になります。つまり、50％になります。 |
| 初期 | このプロパティを初期値に設定します。 |
| 継承 | 親プロパティ値を継承します。 |
例
backgroundPositionプロパティの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20% 60%;
}
</style>
<script>
function changeBackPosition(){
document.body.style.backgroundPosition="top right";
document.getElementById("Sample").innerHTML="The background image position is now changed";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<p>Free learning tutorial for all...</p>
<p>Change the background image position by clicking the below button.</p>
<button onclick="changeBackPosition()">CHANGE POSITION</button>
<p id="Sample"></p>
</body>
</html> 出力
これにより、次の出力が生成されます-
位置変更ボタンをクリックすると-
-
HTMLDOMスタイルの位置プロパティ
HTML DOMスタイルのpositionプロパティは、HTMLドキュメント内のHTML要素で使用されるポジショニングメソッドを返し、変更します。 構文 以下は構文です- 1.復帰位置 object.position 2.位置の変更 object.position = “value” ここで、値は-になります。 Sr.No 値と説明 1 初期 このプロパティ値をデフォルト値に設定します。 2 継承 親要素からこのプロパティ値を継承します。 3 静的 この場合、要素はドキュメントフローに表示される順序でレンダリングされま
-
HTMLDOMスタイル左プロパティ
HTML DOM Style leftプロパティは、配置された要素の左位置を設定または返すために使用されます。要素を配置するには、その位置プロパティを相対、絶対、または固定に設定する必要があります。 以下は、-の構文です。 左側のプロパティの設定- object.style.left = "auto|length|%|initial|inherit" 上記の特性は次のように説明されます- 値 説明 auto これはデフォルトの位置であり、ブラウザを左の位置に設定します。 長さ これは、左の位置を長さの単位で定義するためのものです。