HTMLDOMスタイル左プロパティ
HTML DOM Style leftプロパティは、配置された要素の左位置を設定または返すために使用されます。要素を配置するには、その位置プロパティを相対、絶対、または固定に設定する必要があります。
以下は、-
の構文です。左側のプロパティの設定-
object.style.left = "auto|length|%|initial|inherit"
上記の特性は次のように説明されます-
| 値 | 説明 |
|---|---|
| auto | これはデフォルトの位置であり、ブラウザを左の位置に設定します。 |
| これは、左の位置を長さの単位で定義するためのものです。負の値を許可します。 | |
| ％ | 親要素の幅に対する子の左側の位置を％で設定します。 |
左のプロパティの例を見てみましょう-
例
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
margin-top:70px;
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
var setLeft=50;
function changeLeft() {
document.getElementById("DIV1").style.left = setLeft+"px";
setLeft+=50;
}
</script>
</head>
<h1>Left property example</h1>
<body>
<div id="DIV1"></div>
<p>Change the left position for the below div by clicking the below button</p>
<button type="button" id="myBtn" onclick="changeLeft()">Left Position</button>
</body>
</html> 出力
「左の位置」をクリックすると 」ボタンを押すと、ボックスは毎回50ピクセルずつ右に移動します-
-
HTMLDOMスタイルborderLeftプロパティ
HTML DOM borderLeftプロパティは、要素の左側の境界線プロパティを取得または設定するための省略形として使用されます。 borderLeftプロパティには、border-left-width、border-left-style、border-left-colorが含まれています。 以下は、-の構文です。 borderImageWidthプロパティの設定- object.style.borderLeft = "width style color|initial|inherit" 上記の特性は次のように説明されます- パラメータ 説明 幅 左の
-
HTMLDOMスタイル左プロパティ
HTML DOM Style leftプロパティは、配置された要素の左位置を設定または返すために使用されます。要素を配置するには、その位置プロパティを相対、絶対、または固定に設定する必要があります。 以下は、-の構文です。 左側のプロパティの設定- object.style.left = "auto|length|%|initial|inherit" 上記の特性は次のように説明されます- 値 説明 auto これはデフォルトの位置であり、ブラウザを左の位置に設定します。 長さ これは、左の位置を長さの単位で定義するためのものです。