@osimone

Как сделать, чтобы при клике на div менялся цвет бордера на чистом JavaScript?

Не могу в js сделать так, чтобы при клике на упаковку менялся цвет бордера с синего на допустим красный, и обратно с красного на синий при повторном клике

5f416d04e1b3e374718755.png

<div class="cards">
                    <div class="product">
                        <div class="product__tabs">
                            <div class="card">
                                <div class="card__descr">
                                    <div class="card__cansel">Котэ не одобряет?</div>
                                    <div class="card__label">Сказочное заморское яство</div>
                                    <div class="card__title">Нямушка</div>
                                    <div class="card__subtitle">с фуа-гра</div>
                                    <div class="card__specs">
                                        <span class="card__specs-num">10</span> порций
                                        <br>мышь в подарок</div>
                                    <div class="card__weight">
                                        <div class="card__weight-count">0,5</div>
                                        <div class="card__weight-subcount">кг</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="info__buy">Чего сидишь? Порадуй котэ,
                                <a href="#" class="info__buy-link">купи.</a>
                            </div>
                            <div class="info__descr">Печень утки разварная с артишоками.</div>
                        </div>
                    </div>


.cards {
    display: flex;
    justify-content: center;
}
.card {
    margin-top: 40px;
    position: relative;
    width: 320px;
    height: 480px;
    clip-path: polygon(10% 0, 100% 0, 100% 5%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 5%);
    border-radius: 10px;
    border: 4px solid $main-color;
    background: url(../img/cat.png) #f2f2f2 no-repeat;
    background-position: bottom;
    cursor: pointer;
    &::before{
        display: block;
        z-index: 2;
        transform-origin: 22% 200%;
        -webkit-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
        transform: rotate(-37deg);
        content: '';
        width: 100px;
        border: 4px solid $main-color;
    }
    &__descr {
        margin-left: 40px;
    }
    &__cansel {
        display: none;
        font-family: TrebuchetMS;
        margin-top: 10px;
        font-size: 16px;
        font-weight: 400;
        color: $active-color;
    }
    &__label {
        font-family: TrebuchetMS;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 400;
        color: #666666;
    }
    &__title {
        font-family: TrebuchetMS;
        font-size: 48px;
        margin-top: 10px;
        font-weight: 700;
        color: #000000;
    }
    &__subtitle {
        font-family: TrebuchetMS;
        font-size: 24px;
        // margin-top: 3px;
        font-weight: 700;
        color: #000000;
    }
    &__specs {
        font-family: TrebuchetMS;
        margin-top: 10px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        color: #666666;
        &-num {
            font-family: TrebuchetMS;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700;
            color: #666666;
        }
    }
    &__weight {
        padding-top: 14px;
        width: 80px;
        height: 80px;
        font-family: 'Trebuchet MS', sans-serif;
        font-size: 42px;
        text-align: center;
        color: #fff;
        background-color: $main-color;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        bottom: 15px;
        &-count {
            font-family: TrebuchetMS;
            margin-top:7px;
            font-size: 42px;
            line-height: 22px;
            font-weight: 400;
            color: #ffffff;
        }
        &-subcount {
            font-family: TrebuchetMS;
            margin-top: 7px;
            font-size: 21px;
            line-height: 22px;
            font-weight: 400;
            color: #ffffff;
        }
    }
}
.info {
    margin-top: 15px;
    &__buy {
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
        &-link {
            font-weight: bold;
            font-size: 13px;
            text-decoration: none;
            color: $main-color;
            border-bottom: 1px dashed $main-color;
        }
    }
    &__descr {
        display: none;
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
    }
    &__error {
        display: none;
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
        color: #ff6;
    }
}
.hide {
    display: none;
}
.show {
    display: block;
}
.card-active {
    margin-top: 40px;
    position: relative;
    width: 320px;
    height: 480px;
    clip-path: polygon(10% 0, 100% 0, 100% 5%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 5%);
    border-radius: 10px;
    border: 4px solid $active-color;
    background: url(../img/cat.png) #f2f2f2 no-repeat;
    background-position: bottom;
    cursor: pointer;
    &::before{
        display: block;
        z-index: 2;
        transform-origin: 22% 200%;
        -webkit-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
        transform: rotate(-37deg);
        content: '';
        width: 100px;
        border: 4px solid $active-color;
    }
}
  • Вопрос задан
  • 302 просмотра
Решения вопроса 3
sniggering_deus
@sniggering_deus Куратор тега JavaScript
Dance Gavin Dance - Prisoner
const cardEvent = (n) => {
  n.addEventListener("click", () => {
    n.classList.toggle("card-active");
  });
};

document.querySelectorAll(".card").forEach((n) => cardEvent(n));
Ответ написан
0xD34F
@0xD34F Куратор тега JavaScript
document.addEventListener('click', e => {
  e.target.closest('.card')?.classList.toggle('card-active');
});
Ответ написан
E1ON
@E1ON Куратор тега JavaScript
web, gamedev, anime, science
document.querySelector(".cards").addEventListener("click",  { target } => target.closest('.card')?.classList.toggle('card-active'));


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы