HTML DOM Styleのrightプロパティとは？使い方と構文をわかりやすく解説
HTML DOM Style の right プロパティは、HTML文書内で配置指定（position）された要素の「右端からの位置」を取得・変更するために使用されるプロパティです。JavaScriptを使って動的に要素の水平方向の位置を制御したい場合に活用できます。
rightプロパティの構文
rightプロパティの基本的な構文は以下の2種類です。
1. 値を取得する場合
object.right
2. 値を設定する場合
object.right = "value"
value（値）には以下のような指定が可能です。
| No. | 値と説明 |
|---|---|
| 1 | initial このプロパティの値をデフォルト値に戻します。 |
| 2 | inherit 親要素のプロパティ値を継承します。 |
| 3 | percentage（%） 親要素の幅に対する割合（%）で値を指定します。 |
| 4 | length px や em などの長さ単位で右位置を指定します。 |
| 5 | auto ブラウザに右位置の計算を任せます（デフォルト値）。 |
ポイント： right プロパティは、対象要素の position が relative、absolute、fixed、sticky のいずれかに設定されている場合にのみ有効になります。静的配置（static）の要素には適用されないため注意しましょう。
それでは、HTML DOM Style の right プロパティを使った具体的なサンプルコードを見てみましょう。
サンプルコード
<!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;
position: relative;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style right Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set right position</button>
<script>
function set() {
document.querySelector('.square').style.right = "-400px";
}
</script>
</body>
</html>
実行結果
ページ上の「Set right position」ボタンをクリックすると、JavaScriptによってピンク色の正方形の right 値が -400px に設定され、要素が左方向へ移動します。
このように、right プロパティを利用すれば、CSSを直接書き換えることなく、JavaScriptから動的に要素の位置を操作することが可能です。アニメーションやインタラクティブなUIの実装にも応用できるので、ぜひ覚えておきましょう。
-
HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説
HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no
-
HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説
HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <