Как изменить цвет круга при нажатии кнопки - PullRequest
Новая
       80

Как изменить цвет круга при нажатии кнопки

0 голосов
/ 20 июня 2020

Я хочу знать, как я могу изменить цвет круглой части на основе выбранного цвета. Я написал функцию, но она не работает. Кто-нибудь может мне помочь?

Код Javascript был написан для изменения цвета. Здесь я попытался взять цвет фона круга и изменить его на цвет нажатой кнопки, но я не могу найти способ получить доступ к карточке; раньше в CSS, где я установил цвет фона.

Другая проблема заключалась в извлечении цвета из диапазона при щелчке, чтобы изменить цвет круга на этот. 

function productCardColorChange1() {
    document.getElementById('card').before.style.background = 
    document.getElementById('color1').style.background;
}
//this is the css code
    .container .card {
      position: relative;
      width: 320px;
      height: 450px;
      background: #232323;
      border-radius: 20px;
      overflow: hidden;
    }

   .container .card: before{
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #9bdc28;
     clip-path:circle(150px at 80% 20%);
     transition: 1s;
    }
<div class="container">
        <div class="card" id="card">
            <div class="imgBx" id="imgBx">
                <img src = "shoes.png">
            </div>
            <div class="contentBx">
                <h2>Nike shoes</h2>
                <div class="size">
                    <h3>Size :</h3>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
  
                </div>
                <div class="color">
                    <h3>Color :</h3>
                    <span id="color1" onclick="productCardColorChange1()"></span>
                    <span id="color2"></span>
                    <span id="color3"></span>
                </div>
                <a href="#">Buy Now</a>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 20 июня 2020

Более эффективно использовать addEventListener, если вы ориентируетесь на более чем один элемент. 

const colors = document.querySelectorAll('.color > span')

colors.forEach(elm => {
   elm.addEventListener('click', function(event) {
    const bgColor = window.getComputedStyle(event.target).backgroundColor
   	if(bgColor) {
    	document.getElementById('card').style.backgroundColor = bgColor
    }
  })
})
#card {
  background-color: grey;
}
.container .card {
  position: relative;
  width: 320px;
  height: 450px;
  background: #232323;
  border-radius: 20px;
  overflow: hidden;
}

.container .card: before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #9bdc28;
  clip-path:circle(150px at 80% 20%);
  transition: 1s;
}

.color {
  width: 100%;
  background-color: grey;
}

.color > h3 {
  margin: 0;
 }
 
.color > span {
  display: inline-block;
  width:  30px;
  height: 30px;
  margin: 10px;
  background-color: grey;
}

#color1 {
  background-color: green;
}
#color2 {
  background-color: pink;
}
#color3 {
  background-color: yellow;
}
<div class="container">
        <div class="card" id="card">
            <div class="imgBx" id="imgBx">
                <img src = "shoes.png">
            </div>
            <div class="contentBx">
                <h2>Nike shoes</h2>
                <div class="size">
                    <h3>Size :</h3>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
  
                </div>
                <div class="color">
                    <h3>Color :</h3>
                    <span id="color1"></span>
                    <span id="color2"></span>
                    <span id="color3"></span>
                </div>
                <a href="#">Buy Now</a>
            </div>
        </div>
    </div>
...