前言

我想要实现一个需求如下：

网页的页面如图

加了一个伪元素::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");
});