LearnJS

Изменение размеров элемента через style в JavaScript

Через style.width и style.height можно задать размер элемента прямо из JavaScript. Это удобно, когда значение вычисляется во время работы страницы.

Ширина и высота

<div class="card"></div>
const card = document.querySelector('.card');

card.style.width = '320px';
card.style.height = '180px';

Браузер добавит элементу inline-стили с указанной шириной и высотой.

По умолчанию width и height задают размер области содержимого. padding и границы увеличивают видимый размер элемента. С box-sizing: border-box они входят в указанную ширину и высоту.

Для width и height числу обычно нужна CSS-единица: ‘320px’, ‘50%’ или ‘20rem’. Запись card.style.width = 320 не задаст ширину в пикселях.

Размер из значения JavaScript

Если размер хранится в переменной, добавьте единицу к значению.

<div class="progress-bar"></div>
const progress = 65;
const progressBar = document.querySelector('.progress-bar');

progressBar.style.width = `${progress}%`;

В результате ширина индикатора будет равна 65%. При изменении progress можно задать новую ширину тем же способом.

Ограничение размера

Размер элемента можно ограничить через minWidth, maxWidth, minHeight и maxHeight.

const content = document.querySelector('.content');

content.style.width = '100%';
content.style.maxWidth = '600px';

Элемент будет занимать всю доступную ширину, но не станет шире 600px. Такой вариант удобен, когда размер зависит от ширины окна браузера.

Строчные элементы

У обычных строчных элементов, например span и a, свойства width и height не влияют на размер в строке.

const label = document.querySelector('.label');

label.style.display = 'inline-block';
label.style.width = '160px';
Прежде чем задавать размер строчному элементу, измените его display на inline-block или block.

Когда использовать style

Используйте style, когда JavaScript вычисляет текущий размер: например, для индикатора прогресса. Постоянные размеры и правила оформления лучше оставлять в CSS.

Итого

Размер элемента меняют через style.width и style.height. Значение передают с CSS-единицей, а для ограничения используют minWidth и maxWidth. Для обычных строчных элементов сначала меняют display.