Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Координаты элемента (jQuery)

В jQuery получить координаты элемента можно относительно всего документа и относительно родительского слоя, при помощи функций jQuery.offset() и jQuery.position() соответственно.

.offset()

Функция .offset() возвращает переменную типа объект с координатами относительно документа (свойства top и left).

.position()

Функция .position() возвращает переменную типа объект с координатами элемента относительно родительского слоя (свойства top и left).

Пример

Есть 2 слоя, родительский и дочерний. Задача получить координаты обоих слоев.

Онлайн-пример получения координат.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Координаты элемента (jQuery)</title>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#btn_parent').click(function(){
        var position = $('#parent').position();
        var offset = $('#parent').offset();
        
        var coords = $('#coords');
        coords.show();
        coords.empty();
        
        coords.append('<h2>Координаты родительского слоя</h2>');
        coords.append('<p>Position: top='+Math.round(position.top)+'; left='+Math.round(position.left)+'</p>');
        coords.append('<p>Offset: top='+Math.round(offset.top)+'; left='+Math.round(offset.left)+'</p>');
    });
    
    
    $('#btn_child').click(function(){
        var position = $('#child').position();
        var offset = $('#child').offset();
        
        var coords = $('#coords');
        coords.show();
        coords.empty();
        
        coords.append('<h2>Координаты дочернего слоя</h2>');
        coords.append('<p>Position: top='+Math.round(position.top)+'; left='+Math.round(position.left)+'</p>');
        coords.append('<p>Offset: top='+Math.round(offset.top)+'; left='+Math.round(offset.left)+'</p>');
    });
});
</script>

<style type="text/css">
#parent {border:#CCC 1px solid; padding:5px 10px; position:relative; width:600px; height:200px; margin:200px 0 0 100px;}
#child {border:#930 1px solid; position:absolute; top:100px; left:100px; padding:5px 10px; background-color:#FEE;}
#coords {position:absolute; left:30%; top:90px; border:#000 2px solid; padding:5px 10px; display:none;}
h2 {margin:0; padding:0 0 10px 0; font-weight:normal;}
p {margin:0; padding:0 0 5px 0;}
</style>
</head>

<body>

<h1><a href="/e/Координаты_элемента_(jQuery)">Координаты элемента (jQuery)</a></h1>

<div id="coords"></div>

<div id="parent">Родительские слой (position:relative)<div id="child">Дочерний слой (position:absolute)</div></div>

<br><br>

<input type="button" value="Координаты родительского слоя" id="btn_parent">
<input type="button" value="Координаты дочернего слоя" id="btn_child">

</body>
</html>

Родительский слой

При нажатии на кнопку Координаты родительского слоя появится примерно следующий результат. Координаты элемента (jQuery)

Дочерний слой

При нажатии на кнопку Координаты дочернего слоя появится примерно следующий результат. Координаты дочернего элемента (jQuery)

Примечание

В разных браузерах может быть разный результат.

Опубликовано: 26 октября 2011  ·  Автор: Артём Фёдоров  ·  25346 просмотров

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryКоординаты элемента (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

Позиционирование вычисляется относительно ближайшего элемента-предка с установленным position:relative. Если как-то по другому, то нужно вычислять разницу координат элементов (относительного и вычисляемого)
Артём Фёдоров · 4 года назад
Как установить позиционирование элемента относительно другого (не родительского)?
Евгений Дмитриев · 4 года назад
jQuery, Библиотеки, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания