Найдите координаты каждой ссылки на странице

В Javascript: Как найти координаты (x, y, высота, ширина) каждой ссылки на веб-странице?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
3 500
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Используя jQuery, это очень просто:

$("a").each(function() {
    var link = $(this);
    var top = link.offset().top;
    var left = link.offset().left;
    var width = link.offset.width();
    var height = link.offset.height();
});

С jQuery:

$j('a').each( findOffset );

function findOffset()
{
    alert
    ( 'x=' + $j(this).offset().left
    + ' y=' + $j(this).offset().top
    + ' width=' + $j(this).width()
    + ' height=' + $j(this).height()
    );
}

без jquery:

var links = document.getElementsByTagName("a");
for(var i in links) {
    var link = links[i];
    console.info(link.offsetWidth, link.offsetHeight);
}

попробуйте эту страницу для функции, чтобы получить значения x и y: http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html

Однако, если вы пытаетесь добавить изображение или что-то подобное, я бы предложил использовать селектор a: after css.

Обычный JavaScript:

function getAllChildren (node, tag) {
  return [].slice.call(node.getElementsByTagName(tag));
}
function offset(element){
  var rect = element.getBoundingClientRect();
  var docEl = doc.documentElement;
  return {
    left: rect.left + window.pageXOffset - docEl.clientLeft,
    top: rect.top + window.pageYOffset - docEl.clientTop,
    width: element.offsetWidth,
    height: element.offsetHeight
  };
}

var links = getAllChildren(document.body, 'a');
links.forEach(function(link){
  var offset_node = offset(node);
  console.info(offset_node);
});

Другие вопросы по теме