Всем привет, дали задачку на курсах, нужно что бы был блок по ширине и высоте 150 пикселей, и что бы по клику на кнопку он становился больше, вырастал до 450 пикселей в ширину и высоту, сказали можно использовать библиотеки, но я еще не очень разбираюсь, пожалуйста помогите сделать или объясните как сделать, заранее благодарю.
Привет, тут можно сделать очень просто используя JQuery, выбрать кнопку, при клике на кнопку запускать функцию, которая изменяла бы css свойства ширины и высоты до нужных, предварительно можно сделать transition что бы нагляднее происходило увеличение объекта, можно еще кстати сделать с прикреплением класса, в общем вот примеры:
Первая часть это стили, первый класс это общий класс контейнер, второй класс это блок который будем увеличивать, третий класс это вторая часть примера где меняем размер с помощью toggleClass с нужными параметрами.
.wrap {
width:1000px;
height: 1000px;
background-color: #34648a;
}
.block {
width: 150px;
height: 150px;
margin: 10px;
background-color: gray;
transition: 1s;
}
.biggest {
width: 450px!important;
height: 450px!important;
}
В html добавляем блок, далее кнопка с айди css затем toggle и в конце resetcss, реализация для кнопок прописана в javascript.
<div class="wrap">
<div class="block">
<button id="css">Upgrade block
<button id="toggle">Upgrade block
<button id="resetcss">Reset
Ниже сама реализация, когда мы нажимаем на первую кнопку, просто к стилям блока добисывается новая ширина и высота, когда нажимаем на вторую кнопку блок увеличивается с помощью toggleClass, то есть мы прикрепляем к блоку класс с нужными параметрами тем самым увеличив его, последняя кнопка возвращает размеры блока в прежнее состояние и убирает класс biggest который увеличивал блок.
$('#css').on('click',function(){
$('.block').css("height", 450);
$('.block').css("width", 450);
});
$('#toggle').on('click',function(){
$('.block').toggleClass('biggest');
});
$('#resetcss').on('click',function(){
$('.block').css("height", 150);
$('.block').css("width", 150);
$('.block').removeClass('biggest');
});