Как при клике на элемент увеличить его высоту?
#header {
height: 20px;
line-height: 20px;
text-align: center;
background: crimson;
color: white;
}
<div id="header">Header</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуДва примера сразу
document.querySelector(".item2").onclick = function() {
document.querySelector(".item2").classList.toggle("go");
}
document.querySelector(".item1").onclick = function() {
document.querySelector(".item2").classList.remove("go");
}
.item1,
.item2 {
width: 200px;
height: 50px;
background: red;
transition: 0.34s linear;
margin-top: 10px;
display: inline-flex;
cursor: pointer;
}
.item1:focus {
outline: none;
border: none;
height: 100px;
background: darkred;
}
.go {
background: blue;
height: 100px;
}
<div class="item1" tabindex="1"></div>
<div class="item2"></div>
Могу предложить пару вариантов на jQuery, вариант на чистом JavaScript, а также вариант на CSS.
И так, поехали:
Вариант на jQuery №1
$("#header").click((function() {
var i = 0;
return function() {
$(this).animate({
height: (++i % 2) ? 100 : 20
}, 400);
}
})());
#header {
height: 20px;
line-height: 20px;
text-align: center;
background: crimson;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">Header</div>
Вариант на jQuery №2
$(".header").click(function() {
$(this).toggleClass("active");
});
.header {
height: 20px;
line-height: 20px;
text-align: center;
background: crimson;
color: white;
transition: height 0.4s;
}
.active {
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">Header</div>
Вариант на JavaScript
function classToggle() {
this.classList.toggle('header__20');
this.classList.toggle('header__100');
}
document.querySelector('#header').addEventListener('click', classToggle);
#header {
line-height: 20px;
text-align: center;
background: crimson;
color: white;
}
.header {
height: 20px;
transition: height 0.4s;
}
.header__20 {
height: 20px;
}
.header__100 {
height: 100px;
}
<div id="header" class="header">Header</div>
Вариант на CSS
#container .header {
height: 20px;
line-height: 20px;
text-align: center;
background: crimson;
color: white;
transition: all 0.5s ease-out;
}
#checkbox {
position: absolute;
}
#checkbox:checked~.header {
height: 100px;
transition: all 0.4s ease-in;
}
<div id="container">
<input type="checkbox" id="checkbox" />
<div class="header">Header</div>
</div>
Думаю самый простой из вариантов:
const header = document.querySelector('#header');
header.addEventListener('click', e => {
let target = e.target;
target.style.height = ''; //здесь значение на которое хочешь поменять
});