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 є корисною для створення інтерактивних інтерфейсів, де користувачам надається можливість налаштовувати розміри певних елементів за власними потребами.

Порада:	Для динамічного контролю зміни розмірів під час взаємодії користувача з елементом можна використовувати JavaScript-події `mousedown`, `mousemove` та `mouseup`. Це дозволить створити більш складні та інтуїтивно зрозумілі інтерфейси, коли стандартних можливостей властивості `resize` недостатньо.
Порада:	Якщо вам потрібно, щоб елемент був змінним за розміром лише у певних браузерах, використовуйте відповідні префікси для властивості `resize` в CSS. Хоча сучасні браузери здебільшого підтримують цю властивість, деякі старіші версії можуть потребувати префіксів, наприклад, `-webkit-resize` для Safari.
Порада:	Використовуйте `resize` у комбінації з властивістю `box-sizing` для кращого контролю над внутрішніми відступами (padding) і межами (border) елемента. Встановлення `box-sizing: border-box` забезпечить врахування відступів і меж у загальний розмір елемента, що може бути зручним для уникнення непередбачуваних змін розмірів.

Синтаксис

element.style.resize

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі користувач може взаємодіяти з текстовою областю, дозволяючи або забороняючи її зміну розміру за допомогою відповідних кнопок. Крім того, можна вибрати напрямок зміни розміру за допомогою випадаючого меню, що надає більше контролю над виглядом та поведінкою текстової області.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/gONLeYv">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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';
});

У цьому прикладі ми створюємо редагований блок, який користувач може змінювати за розміром. Для покращення користувацького досвіду ми встановили мінімальні та максимальні розміри блоку, що дозволяє уникнути надто малих або великих розмірів. Після зміни розмірів, подія mouseup виводить поточні розміри блоку в консоль, що може бути корисним для відстеження змін.

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`);
});

JS довідник

JavaScript

Наповнення JS розділу