HTMLElement.offsetTop

  • Revision slug: DOM/element.offsetTop
  • Revision title: element.offsetTop
  • Revision id: 365731
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

Summary

offsetTop returns the distance of the current element relative to the top of the offsetParent node.

Syntax

topPos = element.offsetTop;

Parameters

  • topPos is the number of pixels from the top of the parent element.

Example

var d = document.getElementById("div1");
var topPos = d.offsetTop;
 
if (topPos > 10) {
  // object is offset more
  // than 10 pixels from its parent
}

Specification

{{DOM0}}

offsetLeft, offsetTop and offsetParent made their way into the CSSOM View Module (still a draft)

References

  • {{MSDN("ms534303", "offsetTop Property")}}

Revision Source

<div>{{DomRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><b>offsetTop</b> returns the distance of the current element relative to the top of the <code><a href="/en-US/docs/OffsetParent">offsetParent</a></code> node.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<i>topPos</i> = element.offsetTop;
</pre>

<h3 id="Parameters" name="Parameters">Parameters</h3>
<ul>
  <li><code>topPos</code> is the number of pixels from the top of the parent element.</li>
</ul>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush:js">
var d = document.getElementById("div1");
var topPos = d.offsetTop;
 
if (topPos &gt; 10) {
  // object is offset more
  // than 10 pixels from its parent
}</pre>


<h2 id="Specification" name="Specification">Specification</h2>
<p>{{DOM0}}</p>
<p>offsetLeft, offsetTop and offsetParent made their way into the <a href="http://dev.w3.org/csswg/cssom-view/" title="http://dev.w3.org/csswg/cssom-view/">CSSOM View Module</a>&nbsp;(still a draft)</p>

<h2 id="References" name="References">References</h2>
<ul>
<li>{{MSDN("ms534303", "offsetTop Property")}}</li>
</ul>
Revert to this revision