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

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

element.style.resize - це властивість Javascript, яка дозволяє контролювати можливість зміни розмірів елемента користувачем. Ця властивість застосовується до елементів HTML через стилі, і вона визначає, чи може користувач змінювати розмір елемента за допомогою миші, і в яких напрямках це можливо.

Властивість resize може приймати наступні значення:

• none: забороняє зміну розмірів елемента.
• both: дозволяє змінювати розмір елемента як по горизонталі, так і по вертикалі.
• horizontal: дозволяє змінювати розмір елемента тільки по горизонталі.
• vertical: дозволяє змінювати розмір елемента тільки по вертикалі.

За замовчуванням, більшість елементів не підтримують зміну розмірів користувачем, тому властивість resize зазвичай встановлена в none. Щоб змінити це, потрібно встановити властивість в один з дозволяючих варіантів.

Використання

Для того, щоб зробити елемент змінним за розміром, потрібно спочатку встановити для нього цю властивість через JavaScript. Наприклад:

const element = document.getElementById('myElement');
element.style.resize = 'both';

Важливо пам'ятати, що для того, щоб зміна розміру працювала коректно, елемент повинен мати встановлену властивість overflow зі значенням, відмінним від visible, наприклад:

element.style.overflow = 'auto';

Приклад

Розглянемо повний приклад, де ми робимо блок з ідентифікатором resizableBox змінним за розміром:

// Отримуємо елемент за його ідентифікатором
const resizableBox = document.getElementById('resizableBox');

// Дозволяємо зміну розмірів як по горизонталі, так і по вертикалі
resizableBox.style.resize = 'both';

// Встановлюємо overflow для коректної роботи зміни розмірів
resizableBox.style.overflow = 'auto';

Тепер користувач зможе змінювати розміри елемента resizableBox за допомогою миші, перетягуючи його краї.

Обмеження

Не всі елементи можуть підтримувати зміну розмірів, особливо ті, які мають жорстко встановлені розміри або інші обмеження по стилям. Також слід зазначити, що ця властивість найчастіше використовується з текстовими областями (textarea), де змінність розмірів має сенс для зручності користувача.

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

правити

Порада

Використовуйте resize у комбінації з властивістю box-sizing для кращого контролю над внутрішніми відступами (padding) і межами (border) елемента. Встановлення box-sizing: border-box забезпечить врахування відступів і меж у загальний розмір елемента, що може бути зручним для уникнення непередбачуваних змін розмірів.

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

Порада

Для динамічного контролю зміни розмірів під час взаємодії користувача з елементом можна використовувати JavaScript-події mousedown, mousemove та mouseup. Це дозволить створити більш складні та інтуїтивно зрозумілі інтерфейси, коли стандартних можливостей властивості resize недостатньо.

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

Порада

Якщо вам потрібно, щоб елемент був змінним за розміром лише у певних браузерах, використовуйте відповідні префікси для властивості resize в CSS. Хоча сучасні браузери здебільшого підтримують цю властивість, деякі старіші версії можуть потребувати префіксів, наприклад, -webkit-resize для Safari.

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

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

Синтаксис

element.style.resize

Переглядачі

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

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

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

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

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

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

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

Приклади

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

const textArea = document.createElement('textarea');
document.body.appendChild(textArea);

textArea.style.resize = 'both';
textArea.style.overflow = 'auto';

textArea.addEventListener('input', function() {
    textArea.style.height = 'auto';
    textArea.style.height = textArea.scrollHeight + 'px';
});

const editor = document.createElement('div');
document.body.appendChild(editor);

editor.contentEditable = true;
editor.style.resize = 'both';
editor.style.overflow = 'auto';
editor.style.minWidth = '200px';
editor.style.maxWidth = '600px';
editor.style.minHeight = '100px';
editor.style.maxHeight = '400px';

editor.addEventListener('mouseup', function() {
    console.log(`Current size: ${editor.offsetWidth}px x ${editor.offsetHeight}px`);
});