How can I modify a tag inside div with id with Greasemonkey

Question

I've got the following code:

<div id="header">
  <a href="http://somelink.com">white link</a>
  <a href="http://somelink.com">white link</a>
  <a href="http://somelink.com">white link</a>
  <a href="http://somelink.com">white link</a>
</div>
<div id="some_other_div>
  <a href="http://otherlink.com">unnafected link</a> ...

What I want to do it modify only the <a> tags inside the header div in a similar way to:

#header a {
  color:white;
}

using only Javascript. How would I go about it?

Answer 1

You can use the same CSS selector with querySelector() method.

var ele = document.querySelector('#header a');
ele.style.color = 'white';

---

If there are multiple elements within the div then use querySelectorAll() and iterate over them to update the style property. You can iterate over the collection using simple for loop or Array#forEach method with [].slice.call or Array.from method(for converting into an array).

 var eles = document.querySelectorAll('#header a'); [].slice.call(eles, function(ele){ ele.style.color = 'white'; }) 

Answer 2

here the solution:

var elements = document.querySelector('#header a');
var i;
for (i = 0; i < elements.length; i++) {
  elements[i].style.color = 'white';
}