Получение высоты элемента в Vue.js
Проблема с получением высоты элемента в JavaScript
Я пытаюсь получить высоту одного блока (div), чтобы установить одинаковую высоту для другого блока. Я использовал метод clientHeight, но он возвращает неправильное значение (меньшую высоту). Похоже, что он возвращает высоту до полной загрузки всех элементов.
После некоторых исследований я попробовал использовать window.onload(), чтобы задержать выполнение до полной загрузки, но это также не сработало. У кого-то есть идеи, как решить эту проблему?
Вот пример кода:
mounted () {
this.matchHeight()
},
matchHeight () {
let height = document.getElementById('info-box').clientHeight
}
И разметка HTML:
<div class="columns">
<div class="left-column" id="context">
<p>Некоторый текст</p>
</div>
<div class="right-column" id="info-box">
<img />
<ul>
какой-то список
</ul>
</div>
</div>
Благодарю за помощь!
3 ответ(ов)
Чтобы добиться равной высоты колонок, я бы использовал Flexbox. Это позволяет вам просто и эффективно создавать адаптивные макеты. Вот пример кода, который вы можете использовать:
CSS:
.container {
display: flex; /* Используем flexbox */
}
.column {
border: 1px solid; /* Граница для визуализации */
padding: 20px; /* Отступы внутри колонок */
width: 150px; /* Ширина колонок */
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
sit amet ornare fringilla, ligula quam faucibus urna.
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
</html>
В этом примере .container устанавливается как flex-контейнер, что позволяет колонкам внутри него (элементы с классом .column) автоматически иметь равную высоту. Это особенно полезно, когда контент в колонках разной высоты — благодаря Flexbox они будут выровнены по высоте.
С учетом вашего вопроса, у меня также была проблема с доступом к $el (он возвращал undefined). При использовании Vue и TypeScript следующее решение сработало:
console.log('scriptPanel: mounted: sizes: ', (this.$refs.scriptSheet! as any).$el.clientHeight);
Здесь я использую оператор утверждения ненулевого значения (!), чтобы указать TypeScript, что this.$refs.scriptSheet определен. Это позволяет избежать ошибок компиляции, связанных с неопределенными значениями.
В вашем случае, чтобы получить значение clientHeight, вы можете использовать следующий код:
const height = this.$refs.infoBox.$el.nextElementSibling.clientHeight;
Здесь nextElementSibling позволит вам обратиться к следующему элементу в DOM после элемента, на который ссылается infoBox. Значение clientHeight вернет высоту этого элемента, включая отступы, но не включая границы и горизонтальные полосы прокрутки.
Если у вас возникают трудности с получением данного значения, убедитесь, что элемент, к которому вы обращаетесь, действительно существует и доступен на момент выполнения кода (например, убедитесь, что DOM уже загружен).
jQuery/JavaScript: Замена битых изображений
Как проверить, содержит ли массив строку в TypeScript?
Предварительный просмотр изображений перед загрузкой
jQuery / JavaScript — вызов события нажатия кнопки из события нажатия другой кнопки
Как создать WYSIWYG-редактор на HTML/JS? [закрыто]