How do I control a css child property with javascript?

Question

I'm familiar with how to set the attribute of a css id with js like so in a function:

idOfMyCSSElement.setAttribute("style","color: #122362;");

I'm wondering how I can target nested divs or other elements with js that don't have their own id's.

In css I can target a nested div by specifying:

#idOfMyCSSElement div {border: thin solid red;}

So it would be great if I could target said div by doing something like this in js:

idOfMyCSSElement.div.setAttribute("style","color: #122362;");

But I have no idea what I'm doing at that point. That's just my wild guess. I believe I should be using a different approach.

I'd also like to target something like a css hover state property:

#idOfMyCSSElement:hover {color: yellow;}

Is there a way to target that property of yellow with JS and make it some other color when a js function is called?

Answer 1

you can do it with jquery like this :

$("#idOfMyCSSElement div").css("color","#122362");

EDIT:

you can mimic the hover pseudo class like following :

  $('.someclass').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });

EDIT 2 : say your elements that you planned to change their color has class

htmlElementsToChangeColor then you can do the following to apply change:

$("#myButton").click(function(){
     $(".htmlElementsToChangeColor").css("color","your color code");
});

Answer 2

The easy way is to use jQuery.

The non-jQuery way is to use .getElementByTagName.