log in / join
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > JavaScript > client-side > HTML DOM > properties > offsetTop
offsetTop property
Returns the top position of the object relative to the top side of its offsetParent element, in pixels.
The returned value is the top position of the object including the padding, scrollBar, and the border, but excluding the margin.
- If you need the top position of the object including only the padding, use the clientTop and the offsetTop properties together.
- To set or retrieve the number of pixels by which the contents of an object are scrolled vertically, use the scrollTop property.
- If you need the top position of the browser window, use the screenY or screenTop property.
- If you need the height of an element, you can use the clientHeight, offsetHeight and scrollHeight properties and the getBoundingClientRect method.
- To get the left position of an object, use the offsetLeft property.
Syntax:
object.offsetTop;
You can find the related objects in the Supported by objects section below.
This property is read-only.
Possible values:
Integer that returns the top position, in pixels.
Default: this property has no default value.
Example HTML code 1:
This example retrieves the position of an element, relative to the top-left corner of the browser's client area, with the offsetLeft, offsetTop, scrollLeft and scrollTop properties. See the page for the getBoundingClientRect method for similar functionality.
function GetOffset [object, offset] { if [!object] return; offset.x += object.offsetLeft; offset.y += object.offsetTop; GetOffset [object.offsetParent, offset]; } function GetScrolled [object, scrolled] { if [!object] return; scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop; if [object.tagName.toLowerCase [] != "html"] { GetScrolled [object.parentNode, scrolled]; } } function GetTopLeft [] { var div = document.getElementById ["myDiv"]; var offset = {x : 0, y : 0}; GetOffset [div, offset]; var scrolled = {x : 0, y : 0}; GetScrolled [div.parentNode, scrolled]; var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y; alert ["The top-left corner of the div relative to the top-left corner of the browser's client area: \n" + " horizontal: " + posX + "px\n vertical: " + posY + "px"]; } You can get the top-left corner of this element relative to the top left corner of the client area with the button below. Use the scrollbars to test it for different positions. Get the position of the element with red border! | ||||
| ||||
Did you find this example helpful? yes no |
Example HTML code 2:
This example retrieves the placement of the selected content in Internet Explorer:
function Init [] {
UpdateInfo [];
if [document.attachEvent] { // Internet Explorer
document.attachEvent ["onselectionchange", UpdateInfo];
}
else {
alert ["Your browser does not support this example!"];
}
}
function UpdateInfo [] {
var info = document.getElementById ["info"];
if [document.selection == undefined] {
info.innerHTML = "Your browser does not support this example!";
return;
}
if [document.selection.type == "None"] {
info.innerHTML = "No content is selected, or the selected content is not available!";
}
else {
var textRange = document.selection.createRange [];
var message = "The start point of the selection, relative to the top-left corner of the browser's client area: | ||||
| ||||
Did you find this example helpful? yes no |
Supported by objects:
TextRange
HTML elements:
a, abbr, acronym, address, applet, area, b, bdo, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h2, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, listing, marquee, menu, nobr, noframes, noscript, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp
Related pages:
offsetHeight
offsetLeft
offsetParent
offsetWidth
clientTop
scrollTop
External links:
offsetTop [MSDN]
offsetTop [Mozilla Developer Center]
Share: Digg Del.icio.us Reddit Facebook Twitter Diigo
User Contributed Comments
Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2022 Dottoro.com. All rights reserved.