javascript - 如何使用 onclick 功能更改课程前后的背景颜色

Question

https://i.stack.imgur.com/GNFe2.png

这是跑步照片的链接，

代码应该是这样工作的：当我点击任何颜色时，绿色部分应该变成这种颜色。这是问题所在：-

function changeBgColor(color){
                const bg = document.querySelector('.card');
                bg.style.background = color;
            }

我应该将 ('.card') 重命名为 ('.card::before') 就像 CSS 代码一样，但是当我重命名它并单击颜色时，什么也没发生... ,,, javascript 中的问题， ,,

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #131313;
}
.container
{
    position: relative;
}
.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: 0.5s ease-in-out;
}
.container .card:hover:before
{
    clip-path: circle(300px at 80% -20%);
}
.container .card:after
{
    content: 'Nike';
    position: absolute;
    top: 30%;
    left: -20%;
    font-size: 12em;
    font-weight: 800;
    font-style: italic;
    color: rgba(255,255,255,0.04);
}
.container .card .product-pic
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    width: 100%;
    height: 220px;
    transition: 0.5s;
    
}
.container .card:hover .product-pic
{
    top: 0%;
    transform: translateY(0%);
}
.container .card .product-pic img
{
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-25deg);
    width: 270px;
}
.container .card .contentBx
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
    transition: 1s;
    z-index: 10;
}
.container .card:hover .contentBx
{
    height: 210px;
}
.container .card .contentBx h2
{
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}
.container .card .contentBx .product-size,
.container .card .contentBx .product-colors
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
}
.container .card:hover .contentBx .product-size
{
    opacity: 1;
    visibility: visible;
    transition-delay: 0.57s;
}
.container .card:hover .contentBx .product-colors
{
    opacity: 1;
    visibility: visible;
    transition-delay: 0.8s;
}
.container .card .contentBx .product-size h3,
.container .card .contentBx .product-colors h3
{
    color: #fff;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 10px;
}
.container .card .contentBx .product-size span
{
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    display: inline-block;
    color: #111;
    background: #fff;
    margin: 0 5px;
    transition: 0.5s;
    color: #111;
    border-radius: 4px;
    cursor: pointer;
}
.container .card .contentBx .product-size span:hover
{
    background: #9bdc28;
}
.container .card .contentBx .product-colors span
{
    width: 14px;
    height: 14px;
    margin: 0 10px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.container .card .contentBx .product-colors .active::after
{
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid #8888;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    left: -4px;
    top: -4px;
}
.container .card .contentBx .product-colors span:nth-child(2) 
{
    background: #9bdc28;
}
.container .card .contentBx .product-colors span:nth-child(3)
{
    background: #03a9f4;
}
.container .card .contentBx .product-colors span:nth-child(4)
{
    background: #e91e63;
} 
.container .card .contentBx a
{
    display: inline-block;
    padding: 10px 20px;
    background: #fff;
    border-radius: 4px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 600;
    color: #111;
    opacity: 0;
    transform: translateY(50px);
    transition: 0.5s;
}
.container .card:hover .contentBx a
{
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.88s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="running-shoes-28411.png">
    <title>Product Card | Hover Effects</title>
    <link rel="stylesheet" type="text/css" href="CssCard.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
       <div class="container">
            <div class="card">
               <div class="product-pic">
                    <img src="1.png" class="pop2">
               </div>
               <div class="contentBx">
                   <h2>Nike Shoes</h2>
                   <div class="product-size">
                       <h3>Size :</h3>
                       <span>40</span>
                       <span>41</span>
                       <span>42</span>
                       <span>43</span>
                   </div>
                   <div class="product-colors">
                       <h3>Color :</h3>
                       <span class="active" data-color="#9bdc28" data-pic="url(1.png)" onclick="imgSlider('1.png');changeBgColor('#9bdc28')"></span>
                       <span data-color="#03a9f4" data-pic="url(2.png)" onclick="imgSlider('2.png');changeBgColor('#03a9f4')"></span>
                       <span data-color="#e91e63" data-pic="url(3.png)" onclick="imgSlider('3.png');changeBgColor('#e91e63')"></span>
                   </div>
                   <a href="#">Buy Now</a>
               </div>
         </div>
       </div>

       <script>            
       // add active class in selected spans
       $(".product-colors span").click(function(){
        $(".product-colors span").removeClass("active");
        $(this).addClass("active");
      /*  $(".act").css("background-color",$(this).attr("data-color"));
        $(".product-price").css("color",$(this).attr("data-color"));
        $(".product-pic").css("background-image",$(this).attr("data-pic"));*/
      });

        // change the shoes img
        function imgSlider(anything){document.querySelector('.pop2').src = anything};

        // change background color
        function changeBgColor(color){
                const bg = document.querySelector('.card');
                bg.style.background = color;
            }

            



      </script>

</body>
</html>

标签： javascripthtmlcss

Answer 1

我更新你的changeBgColor功能和你的 css .container .card::before。我在后台传递 avar(--background)并在 js 中更改它。

const style = document.querySelector(".card").style;
style.setProperty("--background", "#9bdc28");

// add active class in selected spans
$(".product-colors span").click(function () {
  $(".product-colors span").removeClass("active");
  $(this).addClass("active");
  /*  $(".act").css("background-color",$(this).attr("data-color"));
  $(".product-price").css("color",$(this).attr("data-color"));
  $(".product-pic").css("background-image",$(this).attr("data-pic"));*/
});

// change the shoes img
function imgSlider(anything) {
  document.querySelector(".pop2").src = anything;
}

// change background color
function changeBgColor(color) {
  const style = document.querySelector(".card").style;
  style.setProperty("--background", color);
}

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #131313;
}
.container {
  position: relative;
}
.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: var(--background);
  clip-path: circle(150px at 80% 20%);
  transition: 0.5s ease-in-out;
}
.container .card:hover:before {
  clip-path: circle(300px at 80% -20%);
}
.container .card:after {
  content: "Nike";
  position: absolute;
  top: 30%;
  left: -20%;
  font-size: 12em;
  font-weight: 800;
  font-style: italic;
  color: rgba(255, 255, 255, 0.04);
}
.container .card .product-pic {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 100%;
  height: 220px;
  transition: 0.5s;
}
.container .card:hover .product-pic {
  top: 0%;
  transform: translateY(0%);
}
.container .card .product-pic img {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  width: 270px;
}
.container .card .contentBx {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  transition: 1s;
  z-index: 10;
}
.container .card:hover .contentBx {
  height: 210px;
}
.container .card .contentBx h2 {
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
}
.container .card .contentBx .product-size,
.container .card .contentBx .product-colors {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}
.container .card:hover .contentBx .product-size {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.57s;
}
.container .card:hover .contentBx .product-colors {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.8s;
}
.container .card .contentBx .product-size h3,
.container .card .contentBx .product-colors h3 {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 10px;
}
.container .card .contentBx .product-size span {
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  display: inline-block;
  color: #111;
  background: #fff;
  margin: 0 5px;
  transition: 0.5s;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
}
.container .card .contentBx .product-size span:hover {
  background: #9bdc28;
}
.container .card .contentBx .product-colors span {
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.container .card .contentBx .product-colors .active::after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #8888;
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: -4px;
  top: -4px;
}
.container .card .contentBx .product-colors span:nth-child(2) {
  background: #9bdc28;
}
.container .card .contentBx .product-colors span:nth-child(3) {
  background: #03a9f4;
}
.container .card .contentBx .product-colors span:nth-child(4) {
  background: #e91e63;
}
.container .card .contentBx a {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #111;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
}
.container .card:hover .contentBx a {
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.88s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="running-shoes-28411.png" />
    <title>Product Card | Hover Effects</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="product-pic">
          <img src="1.png" class="pop2" />
        </div>
        <div class="contentBx">
          <h2>Nike Shoes</h2>
          <div class="product-size">
            <h3>Size :</h3>
            <span>40</span>
            <span>41</span>
            <span>42</span>
            <span>43</span>
          </div>
          <div class="product-colors">
            <h3>Color :</h3>
            <span
              class="active"
              data-color="#9bdc28"
              data-pic="url(1.png)"
              onclick="imgSlider('1.png');changeBgColor('#9bdc28')"
            ></span>
            <span
              data-color="#03a9f4"
              data-pic="url(2.png)"
              onclick="imgSlider('2.png');changeBgColor('#03a9f4')"
            ></span>
            <span
              data-color="#e91e63"
              data-pic="url(3.png)"
              onclick="imgSlider('3.png');changeBgColor('#e91e63')"
            ></span>
          </div>
          <a href="#">Buy Now</a>
        </div>
      </div>
    </div>
  </body>
</html>