Как сделать, чтобы ширина элемента была равна ширине другого?

Question

[Айнур Ярулин]

Здравствуйте, у меня такой вопрос, как сделать, чтобы ширина элемента была равна ширине другого элемента?
Пробовал так, но как и всегда ничего у меня не работает:

let link = document.querySelector('#link');
let border = document.querySelector('#border');
border.style.width = link.offsetWidth;

Мне нужно с помощью чистого JavaScript

Comments

[Nikolay Matyushkin]

Расчёт нужно производить только при загрузке страницы? Или ещё и динамически? Например, когда у вас ширина элемента меняется, и от этого должна меняться ширина и другого элемента.

[Айнур Ярулин]

Devilz_1, border динамический. То есть у меня несколько кнопок (link) и он перемещаться под ту, на которую нажмут.

[Nikolay Matyushkin]

squadbrodyaga, а можете это как-то в песочницу закинуть?

[Айнур Ярулин]

Devilz_1, у меня еще нет кода, но вот пример, только у меня полоска не удлиняется перед тем как перейти на другой элемент https://codemyui.com/wp-content/uploads/2020/06/St...

Answer 1

[Aetae]

Чтоб хоть как-то заработало надо вспомнить что width задаётся в неких единицах измерения, а offsetWidth возвращает просто число: border.style.width = link.offsetWidth + 'px';

Чтоб оно менялось при изменении размера можно добавить наблюдатель(нужен ie - использовать полифил):

let link = document.querySelector('#link');
let border = document.querySelector('#border');
new ResizeObserver(() => border.style.width = link.offsetWidth + 'px').observe(link);

Но вообще в 99% случаев масштабирование элементов решается вёрсткой .

Comments

[Айнур Ярулин]

Спасибо большое