javascript - 删除由::before 伪选择器添加的元素

Question

我有以下情况:(样式在 SASS 中完成，省略了不必要的样式。)

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }
}

这会在应用程序的菜单栏顶部创建一个栏。在某些情况下，必须删除此栏。我读过类似 these 的问题，但没有成功。删除由::before 选择器添加的此栏的最佳方法是什么？

Answer 1

只有 CSS 可以去除伪元素，所以你需要有一个 display:none; 之前的类。首先在 CSS 中声明该类:

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }

  &.no-before::before{
    display:none;
  }
}

然后，当你想删除它时:

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before