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

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

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

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

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

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

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

У цьому прикладі ми спочатку отримуємо елемент з ідентифікатором myElement, а потім встановлюємо для нього мінімальну висоту у 150 пікселів.

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

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

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

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

// Функція для зміни мінімальної висоти
function increaseMinHeight() {
  let element = document.getElementById('myElement');
  element.style.minHeight = '200px';
}

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

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

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

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

let currentMinHeight = parseInt(element.style.minHeight, 10);
element.style.minHeight = (currentMinHeight + 20) + 'px';

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

правити

Порада

Перевіряйте поточне значення minHeight за допомогою window.getComputedStyle, якщо ви хочете уникнути конфліктів з CSS-стилями, які можуть бути застосовані до елемента. Це допоможе вам отримати фактичне значення мінімальної висоти, навіть якщо воно було задано в CSS.

let computedMinHeight = window.getComputedStyle(element).minHeight;

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

Порада

Щоб створити плавні анімації зміни висоти, використовуйте CSS-транзиції разом з minHeight. Додайте до стилів елемента transition: min-height 0.5s ease;, щоб забезпечити плавну зміну мінімальної висоти через JavaScript.

element.style.transition = 'min-height 0.5s ease';
element.style.minHeight = '200px';

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

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

Синтаксис

element.style.minHeight

Переглядачі

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

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

Переглядач
	1	3	1.3	4	12	7

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

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

Приклади

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

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

const expandButton = document.getElementById('expandButton');
const collapseButton = document.getElementById('collapseButton');
const contentBlock = document.getElementById('contentBlock');

expandButton.addEventListener('click', () => {
    contentBlock.style.minHeight = '300px';
});

collapseButton.addEventListener('click', () => {
    contentBlock.style.minHeight = '100px';
});

<button id="addContentButton">Додати</button>
<div id="contentBlock">Демонстраційний елемент</div>

const addContentButton = document.getElementById('addContentButton');
const contentBlock = document.getElementById('contentBlock');
let contentHeight = 100;

addContentButton.addEventListener('click', () => {
    contentHeight += 50;
    contentBlock.style.minHeight = contentHeight + 'px';
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'Додатковий контент';
    contentBlock.appendChild(newParagraph);
});