Home
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <script> $(document).ready(function () { $('#btnDivOffset').click(function(){ var ofs = $('#myDiv').offset(); alert('left:' + ofs.left + ', top: ' + ofs.top); }); $('#btnPOffset').click(function(){ var ofs = $('p').offset(); alert('left:' + ofs.left + ', top: ' + ofs.top); }); //set offset $('p').offset({ left:50, top:200}); }); </script> <style> div{ height:50px; margin:10px 10px 10px 10px; border:1px solid black; } p{ height:10%; width:100%; background-color:yellow; } </style> </head> <body> <h1>Demo: jQuery offset() method</h1> <button id="btnDivOffset">Get div offset</button> <button id="btnPOffset">Get p offset</button> <div id="myDiv"> This is div. </div> <p> This is paragraph. </p> </body> </html>
Result: