2

Как при клике получить координаты элемента относительно блока в котором он находится ? Без jQuery.

Узнать top и left с картинки. Относительно блока center. При клике на синий квадрат.

введите сюда описание изображения

1 ответ 1

5

Без jQuery можно на JavaScript:

function position() {
  var obj = document.getElementById('inside'); // берем интересующий элемент  
  var posX = obj.offsetTop;  // верхний отступ эл-та от родителя
  var posY = obj.offsetLeft; // левый отступ эл-та от родителя
  console.log('x=[' + posX + '] y=[' + posY + ']'); // печатаем координаты
}
.center {
  height: 200px;
  width: 300px;
}

.inside {
  position: absolute;
  margin-top: 55px;
  margin-left: 51px;
  height: 10px;
  width: 10px;
  background: blue;
}
<body>
  <div class="center">
    <div id="inside" class="inside" onclick="position();">
    </div>
  </div>
</body>

Если посмотреть на позиционирование элемента:

введите сюда описание изображения

Верх: 55 + 8 = 63
Лево: 51 + 8 = 59

Что и получили в результате: x=[63] y=[59]

Ссылки для ознакомления:


С использованием jQuery:

Для получения текущего положения относительно родительского элемента - можно использовать position. position() - получает значение позиции элемента top и left относительно отступов его родителя. Также, есть метод offset для получения текущих координат элемента по отношению к документу. С помощью .offset() и .position() функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций, подробнее по ссылке: Позиция элемента.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.