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
– kodder360, Commented Jul 9, 2020 at 19:45

Mr. Polywhirl · Accepted Answer · 2020-07-09 20:29:54Z

1

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>

edited Jul 9, 2020 at 20:29

answered Jul 9, 2020 at 19:55

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to change css background color using JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related