Quiero cambiar el relleno de la imagen al hacer clic en el div principal. ¿Cómo puedo hacerlo de manera efectiva y cuál es una buena manera de hacerlo?
const container = document.getElementById('modal-product-thumb-item'); const myimg = document.getElementById('myimg'); container.addEventListener('click', () => { myimg.classList.toggle('active-image-wrap'); container.classList.toggle('makeg'); }); #modal-product-thumb-item { border: 3px solid transparent; } .active-image-wrap { padding-left: 20px; } .makeg { border: 3px solid #ffaaff !important; } <div id="modal-product-thumb-item" style="border-radius: 10px; height: 100%; overflow: hidden; background: tomato"> <img id="myimg" class="thumb-image-wrap" src="https://www.w3schools.com/html/pic_trulli.jpg" /> </div>puede agregar transition a sus dos clases modificadas
.active-image-wrap { padding-left: 20px; transition: 1s linear; } .makeg { border: 3px solid #ffaaff !important; transition: 1s linear; }Esto debería funcionar:
JavaScript:
const image = document.querySelector('.image') const container = document.querySelector('.container') container.addEventListener('click', () => { image.classList.toggle('active') })CSS:
.image { transition: padding 200ms; } .image.active { padding: 20px; }