使用前端三件套来做一个点击事件

首先我们来做一个HTML部分，这个案例对于新手来说，是比较友好的一个案例，逻辑性也比较简单！废话不说，直接上代码

还是大盒子用container来表示，下面放我们的标题，也可以写自己名字的噢

然后放一个盒子，盒子里面装了circle四个小黑子，分别是用两个类名表示，一个是圆形，一个是颜色

<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>

接下里我们来整CSS部分

我们来给整个页面来清除外边距内边距，加一个c3盒子模型，以免不会被撑开。然后我们这里使用的大量的display布局，比如大盒子主轴，我们让它变成竖着的

circle是圆形的意思，所以我们这里来设置一个圆形只需要将它边框设置百分之五十即可设置圆形

box是我们整个盒子的容器，来装这四个圆圈的，所以我们这块也来使用弹性布局，不管你往里面加多少圆形，都会跟着阅览器屏幕适应宽高！

*,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;
}

接下来就是JS部分

先还是需要我们获取全部的圆形，然后forEach我们需要变量循环，然后在我们圆形设置一个点击事件，
getComputedStyle函数返回一个对象，该对象表示应用于特定元素的所有样式。在本例中，我们正在析构该对象以仅检索backgroundColor属性。
一旦我们得到了backgroundColor的值，我们就可以使用它了但是我们需要在我们的JavaScript代码。例如，我们可能希望将其更改为不同的颜色或使用它有条件地应用一些其他样式。

最后通过文档来设置使我们点击什么颜色的圆形然后我们的屏幕也会跟着我们点击的圆形一起变色

<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>

最后是源码：

<!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使用外嵌样式链接，

*,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;
}

喜欢可以给个三连噢！！！！！！

使用前端三件套来做一个点击事件

猜你喜欢