JavaScript事件委托动态修改CSS伪元素:after和:before的样式

zoe_ya

已于 2023-05-06 12:32:31 修改

阅读量1.9k

点赞数 1

文章标签： javascript css 前端

于 2023-04-02 17:20:41 首次发布

本文链接：https://blog.csdn.net/Constantiny/article/details/129913704

版权

前言

我想要实现一个需求实现遮罩 | 无遮罩如下：

网页的页面如图

在这里插入图片描述

加了一个伪元素::before实现了遮罩效果

但是我想在点击按钮的时候清除掉这个效果

呈现本来的图片
在这里插入图片描述

解决方法

思路：

新增图片的伪元素样式
JS触发点击事件用来覆盖原有的样式
完成图片去掉伪元素显示

.side.left {
  left: 0;
  background: url(src/yulia_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.side.left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(107, 126, 129, 0.7);
}
.side.left.myClick::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.side.right {
  right: 0;
  background: url("src/yulia_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.side.right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 43, 43, 0.8);
}
.side.right.myClick::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

const clearBtnLeft = document.querySelectorAll(".btn")[0];
const clearBtnRight = document.querySelectorAll(".btn")[1];
// 获取要移除伪类的元素
const myLeft = document.querySelector(".side.left");
const myRight = document.querySelector(".side.right");
// 移除伪类:before
/*新增伪元素样式,用来覆盖原有的样式 完成图片去掉伪类显示*/

clearBtnLeft.addEventListener("click", () => {
    myLeft.classList.add("myClick");
});
clearBtnRight.addEventListener("click", () => {
    myRight.classList.add("myClick");
});