Use the front-end three-piece set to do a click event

First of all, let's make an HTML part. This case is a friendly case for novices, and the logic is relatively simple! Don't talk nonsense, go directly to the code

The big box is still represented by container, put our title below, and you can also write your own name

Then put a box, inside the box is filled with four small black spots of circle, which are represented by two class names, one is circle and the other is color

<div class="container">
    <div class="title">几何.小超前端小窝</div>
    <div class="box">
    <div class="circle red"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle black"></div>

    </div>
</div>

Next we come to the whole CSS part

Let's clear the outer margins and inner margins for the entire page, and add a c3 box model to prevent it from being stretched. Then we use a large number of display layouts here, such as the main axis of the big box, we make it vertical

Circle means circle, so we set a circle here and only need to set its border to 50% to set the circle

The box is the container of our entire box to hold these four circles, so we also use elastic layout for this piece, no matter how many circles you add inside, it will adapt to the width and height of the browser screen!

*,html,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    transition: all .7s ease-in-out;
}
.title{
    font-family: 'Gill Sans','Gill Sans MT','Trebuchet MS',sans-serif;
    font-weight: 500;
    font-size: 44px;
    padding: 14px;
}
.container{
    width: 100%;
    height: 100vh;
   
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.circle{
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
}
.box{
    width: 80%;
    background-color: #f7f7f7;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
}
.red{
    background-color: #ff4848;
}
.blue{
    background-color: #009eea;
}
.green{
    background-color: #4fff7b;
}
.black{
    background-color: #333333;
}

Next is the JS part

First, we still need to get all the circles, then forEach we need a variable loop, and then set a click event on our circle, the
getComputedStyle function returns an object that represents all the styles applied to a specific element. In this case, we are destructing the object to retrieve only the backgroundColor property.
Once we have the backgroundColor value, we can use it but we need to in our JavaScript code. For example, we might want to change it to a different color or use it to conditionally apply some other styling.

Finally, set the color of the circle we click on through the document, and our screen will change color along with the circle we click.

<script>
  const circles=document.querySelectorAll('.circle');
//   console.log(circles)
  circles.forEach(circles=>{
    circles.addEventListener('click',({target})=>{
        const { backgroundColor } = getComputedStyle(target)
        // console.log(computedStyle.style.backgroundColor)
        document.body.style.backgroundColor=backgroundColor
    })
  })
</script>

Finally, the source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
    <div class="title">几何.小超前端小窝</div>
    <div class="box">
    <div class="circle red"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle black"></div>

    </div>
</div>
<script>
  const circles=document.querySelectorAll('.circle');
//   console.log(circles)
  circles.forEach(circles=>{
    circles.addEventListener('click',({target})=>{
        const { backgroundColor } = getComputedStyle(target)
        // console.log(computedStyle.style.backgroundColor)
        document.body.style.backgroundColor=backgroundColor
    })
  })
</script>
</body>
</html>

css uses external style links,

*,html,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    transition: all .7s ease-in-out;
}
.title{
    font-family: 'Gill Sans','Gill Sans MT','Trebuchet MS',sans-serif;
    font-weight: 500;
    font-size: 44px;
    padding: 14px;
}
.container{
    width: 100%;
    height: 100vh;
   
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.circle{
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
}
.box{
    width: 80%;
    background-color: #f7f7f7;
    padding: 24px;
    border-radius: 16px;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
}
.red{
    background-color: #ff4848;
}
.blue{
    background-color: #009eea;
}
.green{
    background-color: #4fff7b;
}
.black{
    background-color: #333333;
}

If you like it, you can give it a three-in-one! ! ! ! ! !

Use the front-end three-piece set to do a click event

Guess you like