style.topは、要素のスタイル属性のtopプロパティの値を取得、もしくは、設定するプロパティ。
topプロパティは、ボックス要素の上端から基準位置までの距離を指定することができる。
基準位置は、style.positionプロパティで指定する。
構文
取得
var $top = $elementReference.style.top;
戻り値
要素のスタイル属性のtopプロパティの値。
設定
$elementReference.style.top = "auto | length | percentage | inherit";
- auto | length | percentage | inherit
- ボックス要素の上端から基準位置までの距離を指定する。
- 下記の何れかの値を指定する。初期設定値は「auto」。
- auto：自動設定。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- percentage：「%」や「em」を付けた割合で指定。
- inherit：親要素の設定を継承。
サンプル
サンプルボックス要素
変更後のtopプロパティの値：
サンプルの動作について
- 「auto」ボタンをクリックすると、定位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「auto」と表示する。
- 「10px」ボタンをクリックすると、定位置から下に「10px」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「10px」と表示する。
- 「20px」ボタンをクリックすると、定位置から下に「20px」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「20px」と表示する。
- 「-20px」ボタンをクリックすると、定位置から上に「20px」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「-20px」と表示する。
- 「1em」ボタンをクリックすると、定位置から下に「1em」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「1em」と表示する。
- 「5%」ボタンをクリックすると、定位置から下に「5%」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「5%」と表示する。
- 「10%」ボタンをクリックすると、定位置から下に「10%」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「10%」と表示する。
- 「20%」ボタンをクリックすると、定位置から下に「20%」の位置に「サンプルボックス要素」を配置し、「変更後のtopプロパティの値：」の右横に「20%」と表示する。
- 「継承」ボタンをクリックすると、「サンプルボックス要素」の配置設定を親要素から継承し、「変更後のtopプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setTop( $top ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.top = $top;
var $top = $elementReference.style.top;
document.getElementById( "sampleOutput" ).innerHTML = $top;
}
</script>
function setTop( $top ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.top = $top;
var $top = $elementReference.style.top;
document.getElementById( "sampleOutput" ).innerHTML = $top;
}
</script>
HTML
<div style="border: 1px solid blue; background-color: pink; margin: 60px; width: 300px;">
<div id="sample" style="position: relative; border: 1px solid red; background-color: yellow; height: 200px; margin: 5px; ">
サンプルボックス要素
</div>
</div>
<button onclick="setTop('auto');">auto</button>
<button onclick="setTop('10px');">10px</button>
<button onclick="setTop('20px');">20px</button>
<button onclick="setTop('-20px');">-20px</button>
<button onclick="setTop('1em');">1em</button>
<button onclick="setTop('5%');">5%</button>
<button onclick="setTop('10%');">10%</button>
<button onclick="setTop('20%');">20%</button>
<button onclick="setTop('inherit');">継承</button>
<br />
<p>変更後のtopプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="position: relative; border: 1px solid red; background-color: yellow; height: 200px; margin: 5px; ">
サンプルボックス要素
</div>
</div>
<button onclick="setTop('auto');">auto</button>
<button onclick="setTop('10px');">10px</button>
<button onclick="setTop('20px');">20px</button>
<button onclick="setTop('-20px');">-20px</button>
<button onclick="setTop('1em');">1em</button>
<button onclick="setTop('5%');">5%</button>
<button onclick="setTop('10%');">10%</button>
<button onclick="setTop('20%');">20%</button>
<button onclick="setTop('inherit');">継承</button>
<br />
<p>変更後のtopプロパティの値：<span id="sampleOutput"></span></p>