Bapgabriel Bapgabriel -4 years ago 116
CSS Question

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

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 Source

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';
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download