[Функция] offset()
Раздел "Offset"
Функция предоставляет доступ к текущему смещению первого подходящего элемента относительно документа.
Параметры
Описание
Функция возвращает объект, содержащий два целых числа свойства, соответствующие верхнему и левому отступам. Метод доступен только для видимых элементов.
Примеры
Пример:
Получить смещение 2 параграфа:
"jQuery"
var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );
"HTML"
<p>Hello</p><p>2nd Paragraph</p>
"CSS"
p { margin-left:10px; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); }); </script> </head> <body class="iframe"> <p>Hello</p><p>2nd Paragraph</p> </body> </html> <style> p { margin-left:10px; } </style>
Пример:
Нажмите, чтобы получить смещение.
"jQuery"
$("*", document.body).click(function (e) { var offset = $(this).offset(); e.stopPropagation(); $("#result").text(this.tagName + " coords ( " + offset.left + ", " + offset.top + " )"); });
"HTML"
<div id="result">Click an element.</div>
<p>
Это лучший способ <span>найти</span> смещение.
</p>
<div class="abs">
</div>
"CSS"
p { margin-left:10px; color:blue; width:200px;
cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
left:220px; top:35px; background-color:green;
cursor:pointer; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("*", document.body).click(function (e) { var offset = $(this).offset(); e.stopPropagation(); $("#result").text(this.tagName + " coords ( " + offset.left + ", " + offset.top + " )"); }); }); </script> </head> <body class="iframe"> <div id="result">Click an element.</div> <p> Это лучший способ <span>найти</span> смещение. </p> <div class="abs"> </div> </body> </html> <style> p { margin-left:10px; color:blue; width:200px; cursor:pointer; } span { color:red; cursor:pointer; } div.abs { width:50px; height:50px; position:absolute; left:220px; top:35px; background-color:green; cursor:pointer; } </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21