JS властивість CSSStyleDeclaration.maxHeight

Загальний опис

element.style.maxHeight — це властивість JavaScript, яка дозволяє встановити або отримати максимальну висоту для вибраного HTML-елемента. Ця властивість є частиною об'єкту style, що міститься в DOM-елементах.

Властивість maxHeight використовується для обмеження максимальної висоти елемента, що особливо корисно для створення адаптивних і зручних інтерфейсів. Значення, яке призначається цій властивості, повинно включати одиниці вимірювання, такі як "px", "em", "%", "vh" тощо. Наприклад, якщо ви хочете обмежити висоту елемента до 200 пікселів, ви використовуєте значення "200px".

Щоб встановити максимальну висоту для елемента, спершу потрібно отримати посилання на цей елемент через JavaScript. Це можна зробити, використовуючи методи, такі як document.getElementById, document.querySelector або будь-який інший спосіб вибору елементів. Після цього можна встановити значення властивості maxHeight.

// Отримання посилання на елемент
let element = document.getElementById('myElement');

// Встановлення значення maxHeight
element.style.maxHeight = '200px';

У цьому прикладі ми спочатку отримуємо елемент з ідентифікатором myElement, а потім обмежуємо його максимальну висоту до 200 пікселів.

Також можна отримати поточне значення максимального обмеження висоти для елемента. Це може бути корисним для динамічних обчислень або умовного форматування елементів.

// Отримання поточного значення maxHeight
let currentMaxHeight = element.style.maxHeight;
console.log(currentMaxHeight);

У цьому прикладі ми отримуємо і виводимо поточне значення maxHeight для елемента myElement.

Ви можете змінювати значення maxHeight динамічно, залежно від певних умов або подій. Наприклад, можна змінювати максимальну висоту під час кліку на кнопку.

// Функція для зміни максимального обмеження висоти
function increaseMaxHeight() {
  let element = document.getElementById('myElement');
  element.style.maxHeight = '300px';
}

// Додаємо подію до кнопки
let button = document.getElementById('myButton');
button.addEventListener('click', increaseMaxHeight);

Цей код додає подію кліку до кнопки з ідентифікатором myButton, яка збільшує максимальну висоту для елемента myElement до 300 пікселів.

Існує можливість використовувати відносні одиниці вимірювання, такі як відсотки або vh, що дозволяє створювати адаптивні інтерфейси. Наприклад, встановивши element.style.maxHeight = '50vh', ви обмежите висоту елемента половиною висоти вікна перегляду, що забезпечує адаптивність до різних розмірів екрана.

Для складніших маніпуляцій з обмеженням висоти ви можете використовувати JavaScript для обчислення нових значень maxHeight. Наприклад, щоб збільшити поточне обмеження на 20 пікселів, спочатку отримайте поточне значення, видаліть "px", перетворіть його на число, додайте 20 і знову встановіть.

let currentMaxHeight = parseInt(element.style.maxHeight, 10);
element.style.maxHeight = (currentMaxHeight + 20) + 'px';

Властивість element.style.maxHeight є потужним інструментом для контролю висоти елементів на вашій веб-сторінці, що дозволяє створювати адаптивні, зручні та інтерактивні інтерфейси.

правити

Порада

Щоб уникнути конфліктів зі стилями, заданими в CSS, перевіряйте, чи властивість maxHeight встановлена безпосередньо через JavaScript. Якщо вона порожня, це може означати, що значення було задано через зовнішні стилі. Використовуйте window.getComputedStyle(element).maxHeight для отримання фактичного значення обмеження висоти, навіть якщо воно задано в CSS.

let computedMaxHeight = window.getComputedStyle(element).maxHeight;

автор: Bond правити

Порада

Використовуйте element.style.maxHeight для створення плавних анімацій при зміні розміру елементів. Це може бути корисно для створення ефектів розгортання або згортання контенту. Додайте до вашого CSS-стилю елемента transition: max-height 0.5s ease;, щоб плавно змінювати максимальну висоту через JavaScript.

element.style.transition = 'max-height 0.5s ease';
element.style.maxHeight = '200px';

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.maxHeight

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<button id="toggleButton">Перемкнути</button>
<div id="textBlock" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

const button = document.getElementById('toggleButton');
const textBlock = document.getElementById('textBlock');

button.addEventListener('click', () => {
    if (textBlock.style.maxHeight) {
        textBlock.style.maxHeight = null;
    } else {
        textBlock.style.maxHeight = textBlock.scrollHeight + 'px';
    }
});

<button id="expandBtn">Розгорнути</button>
<div id="container">Демонстраційний елемент</div>

const expandBtn = document.getElementById('expandBtn');
const container = document.getElementById('container');

expandBtn.addEventListener('click', () => {
    container.style.maxHeight = '300px';
    setTimeout(() => {
        container.style.maxHeight = '0px';
    }, 2000); // Змінює maxHeight назад на 0px через 2 секунди
});