Как сделать, чтобы при нажатии на картинку, она обводилась в рамку 1px solid green
? Я пытался написать через active
, но оно работает только при удержании нажатия.
добавить комментарий
|
5 ответов
Ещё проще:
img {
width: 200px;
border: none;
}
.img__active {
width: 200px;
border: 3px solid green;
}
<img onclick="this.className = (this.className == 'img' ? 'img__active' : 'img')" class="img" src="https://avatars.mds.yandex.net/get-altay/1001354/2a00000162870a1502d58ac2f093f4b64785/XXL">
Когда задаёте вопрос выкладывайте кусочек своего кода чтобы участники могли посмотреть что у вас есть. Вот рабочий пример HTML+JS
coffee.addEventListener('click',()=>{
event.target.style.border="1px solid green";
})
<img src="https://vozhzhaev.ru/projects/coffee/img/coffee/coffee_png.png" alt="" id="coffee">
-
@pane проверить что есть бордер и если это так, то удалить слушателя – Владлен Вожжаев 15 мар '20 в 17:56
-
@Sevastopol'
onclick=
удобно когда элемент один, но если их много (неизвестно сколько), то лучше ставить слушателей. – Владлен Вожжаев 15 мар '20 в 18:06
вот так можно сделать:
img{
border:solid transparent;
outline:none;
}
img:focus{
border:solid red;
}
<img src="https://picsum.photos/100?1" tabindex=0>
<img src="https://picsum.photos/100?2" tabindex=0>
Решение для неопределенного количества изображений на странице.
document.addEventListener('click', (e) => {
const image = e.target.closest('img');
if (image === null) return;
image.classList.toggle('focus');
});
img {
border-color: transparent;
border-style: solid;
border-width: 5px;
transition: border-color 0.5s;
}
img.focus {
border-color: #000;
}
figure img.focus {
border-color: red;
}
<div class="images">
<img src="https://i.picsum.photos/id/338/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/339/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/340/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/341/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/342/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/343/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/344/150/150.jpg" alt="">
<img src="https://i.picsum.photos/id/345/150/150.jpg" alt="">
</div>
<figure>
<img src="https://i.picsum.photos/id/301/500/500.jpg" alt="Random image">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</figcaption>
</figure>
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
const image = document.querySelector('.image img');
/* image.addEventListener('click', () => {
const borderWidth = image.style.borderWidth === '1px' ? '0' : '1px';
image.style.borderWidth = borderWidth;
}); */
image.addEventListener('click', () => image.classList.toggle('focus'));
.image img {
border-color: #000;
border-style: solid;
border-width: 0;
}
.image img.focus {
border-width: 5px;
}
<div class="image">
<img src="https://i.picsum.photos/id/338/500/300.jpg" alt="">
</div>
Решение в пару строк (не практично и не читабельно):
img {
border: 5px solid transparent;
}
img.focus {
border-color: #000;
}
<img onclick="this.classList.toggle('focus')" src="https://i.picsum.photos/id/338/150/150.jpg" alt="">