HTMLDOMスタイルの位置プロパティ
HTML DOMスタイルのpositionプロパティは、HTMLドキュメント内のHTML要素で使用されるポジショニングメソッドを返し、変更します。
構文
以下は構文です-
1.復帰位置
object.position
2.位置の変更
object.position = “value”
ここで、値は-
になります。| Sr.No | 値と説明 |
|---|---|
| 1 | 初期 このプロパティ値をデフォルト値に設定します。 |
| 2 | 継承 親要素からこのプロパティ値を継承します。 |
| 3 | 静的 この場合、要素はドキュメントフローに表示される順序でレンダリングされます。 |
| 4 | 絶対 この場合、要素は、ドキュメント内で最初に配置された祖先要素を基準にして配置されます。 |
| 5 | 修正済み この場合、要素はドキュメント内のブラウザウィンドウを基準にして配置されます。 |
| 6 | 相対的 この場合、要素はドキュメント内の通常の位置を基準にして配置されます。 |
| 7 | スティッキー この場合、要素はドキュメント内のユーザーのスクロール位置に従って配置されます |
HTMLDOMスタイルの位置プロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.square {
width: 100px;
height: 100px;
background: #db133a6b;
top: 150px;
left: 50%;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html> 出力
「位置を設定」をクリックします 」ボタンでピンクの位置を設定します 正方形。
-
HTMLDOMスタイルの表示プロパティ
HTML DOMスタイルの表示プロパティは、要素の表示タイプを設定または返すために使用されます。要素は主にブロックまたはインラインです。 display：noneを使用して要素を非表示にすることもできます。 以下は、-の構文です。 表示プロパティの設定- object.style.display = value 上記のプロパティ値は次のように説明されます- 値 説明 インライン 要素をインライン要素として表示する場合、つまり、widthプロパティとheightプロパティは効果がありません。 ブロック ブロック要素は新しい行に表示され、幅全体を取ります。
-
HTMLDOMスタイル左プロパティ
HTML DOM Style leftプロパティは、配置された要素の左位置を設定または返すために使用されます。要素を配置するには、その位置プロパティを相対、絶対、または固定に設定する必要があります。 以下は、-の構文です。 左側のプロパティの設定- object.style.left = "auto|length|%|initial|inherit" 上記の特性は次のように説明されます- 値 説明 auto これはデフォルトの位置であり、ブラウザを左の位置に設定します。 長さ これは、左の位置を長さの単位で定義するためのものです。