Offset top js

Browser support:

Returns the top position of the object relative to the top side of its offsetParent element, in pixels.

This property is read-only.

Integer that returns the top position, in pixels.

Default: this property has no default value.

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.

<head> <script type="text/javascript"> 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"); } script> head> <body> <div style="height:200px; width:300px; overflow:auto;"> <div id="myDiv" style="width:200px; border:1px solid red;"> You can get the top-left corner of this element relative to the top left corner of the client area with the button below.<br /> Use the scrollbars to test it for different positions. div> <div style="width:1000px; height:1000px;">div> div> <br /> <button onclick="GetTopLeft ();">Get the position of the element with red border!button> body>

Did you find this example helpful? yes no

This example retrieves the placement of the selected content in Internet Explorer:

<head> <script type="text/javascript"> 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:
"; message += "left: " + textRange.offsetLeft + "
"; message += "top: " + textRange.offsetTop + "
"; message += "
The bounding rectangle of the selection, relative to the top-left corner of the browser's client area:
"; message += "left: " + textRange.boundingLeft + "
"; message += "top: " + textRange.boundingTop + "
"; message += "width: " + textRange.boundingWidth + "
"; message += "height: " + textRange.boundingHeight + "
"; info.innerHTML = message; } } script> head> <body onload="Init ();"> <div onscroll="UpdateInfo ();" style="padding:100px; height:100px; width:400px; overflow:scroll;"> <nobr>Select some content within this field.nobr> <nobr>The coordinates of the selected content's boundary rectanglenobr> <nobr>are visible in the field belownobr> div> <br /><br /> <div id="info" style="background-color:#e0c0a0;">div> body>

Did you find this example helpful? yes no

User Contributed Comments

Top List Top

Offset top js

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội