Changing child element background color using javascript

Question

Well, I am trying my best:

var element = document.getElementsByClassName("tab active");
var child = element.firstElementChild;
child.style.color = '#ffffff';
child.style.backgroundColor = '#004831';

<li class="tab active">
  <a href="#">
    Annual Report
  </a>
 </li>

This link same as above: https://jsfiddle.net/zxcc0rce/3/

Still not working, is there something missing?

Thanks in advance

Answer 1

getElementsByClassName will give you a list of elements and you need choose which one of them you want to apply your style.

in your case, change this line :

var child = element[0].firstElementChild;

https://jsfiddle.net/zxcc0rce/4/

Answer 2

Amended your fiddle so it works here: https://jsfiddle.net/zxcc0rce/5/

Here is how I fixed it:

I changed this line from

var element = document.getElementsByClassName("tab active");

to

var element = document.getElementsByClassName("tab active")[0];

Answer 3

You can do with css styling

.active a {
  color: #FFF;
  background: #004831
}

<li class="tab active">
  <a href="#">
    Annual Report
  </a>
 </li>
 <li class="tab">
  <a href="#">
    Annual Report
  </a>
 </li>

Answer 4

Why this does not work is because getElementsByClassName returns a list of all the matching elements.

So to fix it you can simply use the first element in that list:

var child = element[0].firstElementChild;