HTML DOMのStyle leftプロパティとは？使い方とサンプルコードを解説
HTML DOM Style leftプロパティとは
HTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。
なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。
構文
leftプロパティを設定する際の構文は以下の通りです。
object.style.left = "auto|length|%|initial|inherit";
指定できる値の一覧
| 値 | 説明 |
|---|---|
| auto | デフォルト値です。左位置はブラウザが自動的に決定します。 |
| length | pxなどの長さ単位で左位置を指定します。負の値も使用できます。 |
| % | 親要素の幅に対する割合（%）で、子要素の左位置を設定します。 |
| initial | このプロパティを初期値に戻します。 |
| inherit | 親要素のプロパティ値を継承します。 |
leftプロパティの使用例
ここでは、ボタンをクリックするたびに赤いボックスが右へ移動する簡単なサンプルを紹介します。
<!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プロパティの使用例</h1>
<body>
<div id="DIV1"></div>
<p>下のボタンをクリックするとdiv要素の左位置が変わります</p>
<button type="button" id="myBtn" onclick="changeLeft()">左位置を変更</button>
</body>
</html>実行結果
ページを表示すると、絶対配置された赤いボックスが確認できます。
「左位置を変更」ボタンをクリックするたびに、ボックスが50pxずつ右方向へ移動していきます。これはJavaScriptの changeLeft() 関数内で、style.left の値をクリックのたびに50pxずつ加算しているためです。
まとめ
leftプロパティを使えば、JavaScriptから動的に要素の水平位置を制御できます。アニメーションやドラッグ操作など、インタラクティブなUIを実装する際に非常に便利なプロパティなので、positionプロパティとの組み合わせ方とあわせて覚えておきましょう。
-
HTML DOMのborderLeftプロパティとは？使い方とサンプルコードを解説
HTML DOMのborderLeftプロパティは、要素の左ボーダー（境界線）に関するプロパティを取得・設定するためのショートハンド（省略記法）です。このプロパティひとつで、以下の3つの個別プロパティをまとめて操作できます。border-left-width（左ボーダーの幅）border-left-style（左ボーダーのスタイル）border-left-color（左ボーダーの色）構文borderLeftプロパティを設定する場合の構文は以下のとおりです。object.style.borderLeft = width style color | initial | inheritパラメータの説
-
HTML DOMのStyle leftプロパティとは？使い方とサンプルコードを解説
HTML DOM Style leftプロパティとはHTML DOMのleftプロパティは、位置指定された要素の「左からの位置」を設定または取得するために使用されます。なお、このプロパティで要素の位置を制御するには、対象要素のCSS positionプロパティが relative、absolute、fixed のいずれかに設定されている必要があります。構文leftプロパティを設定する際の構文は以下の通りです。object.style.left = auto|length|%|initial|inherit;指定できる値の一覧値説明autoデフォルト値です。左位置はブラウザが自動的に決定します。