javascript - 使用 jQuery 改变 psudo 类

Question

我有一个 CSS 说

div.borderYtoX a:before,
div.borderYtoX a:after {
  position: absolute;
  opacity: 0.5;
  height: 100%;
  width: 2px;
  content: '';
  background: #FFF;
  transition: all 0.3s;
}

我想在向下滚动时将此处的背景更改为其他颜色。它影响滚动的导航菜单。下面是 jQuery 代码以及我尝试过但不起作用的代码。有没有办法在这里做到这一点？

$(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', 'rgb(255,255,255)');
          $('div.container a').css('color', '#063193');
          $('.borderYtoX a:before, .borderYtoX a:after').css('background', '#063193');
       } else {
          $('.header').css('background-color', 'rgba(255,255,255,0.3)');
          $('div.container a').css('color', '#fff');
          $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff');
       }
   });
});

Answer 1

您不能使用 javascript 访问伪元素，因为它们实际上并不存在于 DOM 中。如果您想操纵它们，请使用 Jquery 将覆盖类应用于元素并为该新类添加 css 覆盖

CSS

div.borderYtoX a.active:before,
div.borderYtoX a.active:after {

  background: #063193;
}

脚本

$(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', 'rgb(255,255,255)');
          $('div.container a').css('color', '#063193');
          $('.borderYtoX a, .borderYtoX a').toggleClass('active');
       } else {
          $('.header').css('background-color', 'rgba(255,255,255,0.3)');
          $('div.container a').css('color', '#fff');
          $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff');
       }
   });
});