Как увеличить размер блока при клике на него?

14.01.2024 12:01:22 pm

Как при помощи JavaScript или библиотеки jQuery, можно увеличивать ширину блока, при каждом клике на него?
Спасибо.

Жалоба

14.01.2024 02:08:56 pm

Покажу пример на чистом JS. Допустим, у нас три блока (Блоков может быть сколько угодно):

<div class="block">Первый блок</div>
<div class="block">Второй блок</div>
<div class="block">Третий блок</div>

Блоки могут иметь дополнительные атрибуты и другое название класса. Главное, чтобы название класса совпадало с названием значения, что содержится в методе (block): getElementsByClassName('block').

Стиль блоков для примера:

.block {
	border: 1px solid #000000;
	display: inline-block;
	margin: 0 3px 0 0;
	padding: 4px 6px 4px 6px;
}

Стиль тоже может быть любым другим.

И сам JS:

var blocks = document.getElementsByClassName('block');              // Получаем все блоки с классом "block"

for (var i = 0; blocks.length > i; i++) {                           // Прогоняем все блоки через цикл
	blocks[i].addEventListener('click', function() {            // При клике на один из блоков выполняем код ниже
		this.style.width = (Number(this.offsetWidth) + 25); // Увеличиваем ширину блока на 25 пикселей
	});
};

25 - это шаг увеличения, в пикселях. Измените на нужное вам количество пиксей.

Жалоба

14.01.2024 04:01:52 pm

Спасибо! То, что надо!

Только, как теперь сделать так, чтобы блоки не становились размером больше, чем, например, 1024 пикселя? А то за пределы страницы уплывает.

Жалоба

14.01.2024 04:51:39 pm

Замените:

		this.style.width = (Number(this.offsetWidth) + 25);

На:

		if (this.offsetWidth < 1024) {
			this.style.width = (Number(this.offsetWidth) + 25);
		};

Долно получиться так:

var blocks = document.getElementsByClassName('block');

for (var i = 0; blocks.length > i; i++) {
	blocks[i].addEventListener('click', function() {
		if (this.offsetWidth < 1024) {
			this.style.width = (Number(this.offsetWidth) + 25);
		};
	});
};

Жалоба

15.01.2024 07:34:03 am

Slash, спасибо, все работает, как часики.

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

		if (this.offsetWidth < 1024) {
			this.style.width = (Number(this.offsetWidth) + 25);
		}
		else {
			alert('Достигнут лимит ширины блока.');
		};

Жалоба