Обводка картинки при нажатии

Question

Как сделать, чтобы при нажатии на картинку, она обводилась в рамку 1px solid green? Я пытался написать через active, но оно работает только при удержании нажатия.

Answer 1

Когда задаёте вопрос выкладывайте кусочек своего кода чтобы участники могли посмотреть что у вас есть. Вот рабочий пример 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">

Answer 2

Ещё проще:

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">

Answer 3

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="">

Answer 4

вот так можно сделать:

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>

Answer 5

Решение для неопределенного количества изображений на странице.

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>

БЛОГ НА HUSL

Обводка картинки при нажатии

Ответы (5 шт):