Как вычислить ширину гиперссылки в пикселях?

Question

Есть код гиперссылки:

<li class="submenu__title">
                  <a href="#">Крупная бытовая техника</a>
</li>

Как вычислить ее длину (точную ее ширину в px в отображаемой HTML странице - длину текста Крупная бытовая техника в px) в html и css?

Answer 1

let width = document.querySelector('.link');
console.log('Ширина:',width.offsetWidth,'px');

a {display: inline-block;}

<a class="link" href="#">Ссылка</a>

длину текста Крупная бытовая техника в px

let width = document.querySelector('.submenu__title>a');
console.log('Ширина:',width.offsetWidth,'px');

<li class="submenu__title">
  <a href="#">Крупная бытовая техника</a>
</li>

upd.

а как обратиться свойству offsetWidth из html кода, а не из js? – newmandvin

кликнуть по ссылке, чтобы узнать ширину

<li class="submenu__title">
  <a href="#" onclick="alert(offsetWidth)">Крупная бытовая техника</a>
</li>