← Все примеры

JavaScript Разработка и QA

Размер элемента при наведении

Показывает небольшую подсказку с шириной и высотой элемента под курсором.

Код для копирования

try {
  const tip = document.createElement('div');
  tip.style.cssText = 'position:fixed;z-index:99999;background:#282828;color:#ebdbb2;'
    + 'font:11px monospace;padding:3px 6px;pointer-events:none;border-radius:3px;display:none;';
  document.body.appendChild(tip);
  document.addEventListener('mousemove', function (e) {
    const el = e.target;
    if (!el || el === tip) return;
    const r = el.getBoundingClientRect();
    tip.textContent = el.tagName.toLowerCase() + ' '
      + Math.round(r.width) + ' x ' + Math.round(r.height);
    tip.style.left = (e.clientX + 14) + 'px';
    tip.style.top = (e.clientY + 14) + 'px';
    tip.style.display = 'block';
  });
} catch (err) { console.error('JustZix box dimensions:', err); }

Как использовать этот пример

  1. Скопируй код кнопкой выше.
  2. Установи JustZix (2 минуты) и открой расширение на нужной странице.
  3. Добавь новое правило, совпадающее с этой страницей.
  4. Вставь код в панель JavaScript правила и сохрани — он запускается при каждом заходе на страницу.

Оцени этот пример

Оценок пока нет — оцени первым.

Этот пример работает?

Сниппеты бесполезны, если их некуда вставить.

JustZix устанавливается за 2 минуты и запускает твой код на каждой подходящей странице. Без аккаунта, без оплаты.

Скачать бесплатно Смотреть применение