jQuery функция .offset()
Раздел: Основы CSS
Описание: Получает текущие значения отступов относительно документа для элемента в наборе.
Возвращаемый объект содержит два значение (сверху и слева) типа Float . Для фактического позиционирования браузеры обычно округляют эти значения до ближайшего целого.
В некоторых случаях .offset(), может быть дробным
Этот метод работает только с видимыми элементами.
Возвращает текущую позицию относительно document а не относительно родителя!
Примеры
.offset() без опций возвращает объект, содержащий свойства top и left.
javascript:
var offset = $(ell).offset(); // Получены значения: var left = offset.left ; var top = offset.top ;
.offset( функция ) Установит смещение обекта top и left
javascript:
$( ell ).offset({ top: 10, left: 30 });
html:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>offset Живые примеры</title>
<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>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
<div id="result">Кликни по элементу.</div>
<p>
Это лучший способ, чтобы <span>найти</span> позицию.
</p>
<div class="abs"></div>
<script>
$( "*", document.body ).click(function( event ) {
var offset = $( this ).offset();
event.stopPropagation();
$( "#result" ).text( this.tagName +
" coords ( " + offset.left + ", " + offset.top + " )" );
});
</script >
</body>
</html>
Живые примеры
Кликни по элементу.
Это лучший способ, чтобы найти позицию.