как изменить цвет фона css с помощью JavaScript?

Question

Мне трудно изменить цвет фона с помощью JavaSript. Я хочу изменить только цвет свойства фона, которое находится внутри .diagnosis-kit-inner .nav-tabs .nav-item.active: after. Кто-нибудь может мне помочь. Может ли кто-нибудь мне помочь? Спасибо

function changeColor() {
  var changeColor = document.getElementsByClassName(".diagnosis-kit-inner .nav-tabs .nav-item.active:after");

  changeColor.style.backgroundColor = 'blue';
}

.diagnosis-kit-inner .nav-tabs .nav-item.active:after {
  background-color: white;
}

<div class="diagnosis-kit-inner ">
  <ul class="nav-tabs">
    <li class="nav-item">
    </li>
  </ul>
</div>
<a href="#" onclick="changeColor()">Change Color</a>

Answer 1

Вы не можете изменить стиль psudo-селектора, но можете использовать var() для цвета фона и назначить значение по умолчанию в документе :root.

Вы затем можно перезаписать это, используя JavaScript, вызвав setProperty на style из documentElement.

Это было адаптировано из этого ответа: Изменение CSS псевдоэлемента стили через JavaScript

function changeActiveColor() {
  document.documentElement.style.setProperty('--nav-item-active-bg', 'blue');
}

:root {
  --nav-item-active-bg: white;
}

.diagnosis-kit-inner .nav-tabs .nav-item.active:after {
  color: #CCC;
  content: 'Active';
  padding: 0.25em;
  background-color: var(--nav-item-active-bg); /* Dynamic var prop */
}

<div class="diagnosis-kit-inner">
  <ul class="nav-tabs">
    <li class="nav-item active"></li>
  </ul>
</div>
<a href="#" onclick="changeActiveColor()">Change Color</a>