how to change css background color using JavaScript?

Question

I am having difficulty to change background color using JavaSript. I only want to change color of background property that is inside .diagnosis-kit-inner .nav-tabs .nav-item.active:after. Can anyone help me please.Can anyone help me please? Thanks

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>

Thanks for ur response. I have fixed this error. Can u please help me out to sort out this issue. Thanks — kodder360, Jul 09 '20 at 19:45

Mr. Polywhirl · Answer 1 · 2020-07-09T20:29:54.950

You cannot change the style of a psudo-selector, but you can use a var() for the background color and assign a default at the document :root.

You can then overwrite this using JavaScript by calling setProperty on the style of the documentElement.

This was adapted from this answer: Changing CSS pseudo-element styles via 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>

how to change css background color using JavaScript?

1 Answers1