Как присвоить высоту одного элемента к другим элементам на чистом JS?
Как мне через vanilla js получить высоту самого высокого элемента слайдера и присвоить его к остальным, чтобы по итогу была одна высота для всех?
На сайте использовался swiper-слайдер, при добавлении в него картинок разного размера они распологаются в различной высоте, через параметры самого слайдера не получилось это пофиксить, флексами тоже, задавать жестко высоту через css кажется костылём.
Ответы (2 шт):
Может кому-то пригодится.
Тут я нашел как получить высоту самого длинного элемента.
А дальше уже сам дописал:
function setMaxHeight() {
let els = document.querySelectorAll(".card-img-top"),
arr = [];
/* Итерация каждого элемента и добавление их высоты в массив arr*/
for (let i = 0; i < els.length; i++) {
arr.push({ height: els[i].clientHeight });
}
/* Вывод самой длинной высоты элементов */
let elsMaxHeight = Math.max(...arr.map(o => o.height));
/* Присваивание полученной высоты для всех других элементов */
for (let i = 0; i < els.length; i++) {
console.log(els[i].style.height = elsMaxHeight + 'px');
}
}
setMaxHeight();Тут JS не понадобится. Флексами все должно работать. У элемента swiper-wrapper должно быть align-items: stretch; у элементов swiper-slide должно быть свойство height: auto;. Тысячу раз так делал, и не нужно городить костыли на JS. Если у слайда есть внутри элемент в качестве обертки для контента, то у него должно быть height: 100%.