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?

possible duplicate of [Is it possible to alter a CSS stylesheet using JavaScript? (NOT the style of an object, but the stylesheet itself)](http://stackoverflow.com/questions/6620393/is-it-possible-to-alter-a-css-stylesheet-using-javascript-not-the-style-of-an) — Quentin, Nov 14 '12 at 20:10

Behnam Esmaili · Accepted Answer · 2012-11-14T21:05:39.767

3

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");
});

edited Nov 14 '12 at 21:05

answered Nov 14 '12 at 20:11

Behnam Esmaili

5,835
6
32
63

Thanks - is that the pure jquery code, as in I can just slip it into a normal js function and it will happen. I'm just getting started with jquery and am a little unsure at times with how it mixes with normal js. – Chain Nov 14 '12 at 20:21
With pure JavaScript you do: getElementsByTagName("div"). Returns an array. – Francis Nepomuceno Nov 14 '12 at 20:23
Separately, would that work for targeting a css hover state too? – Chain Nov 14 '12 at 20:24
no i think it not support pseudo class like :hover yet,but you can handle hover event by jquery and apply specific style to elements. – Behnam Esmaili Nov 14 '12 at 20:30
JQuery is very useful library with minimal learning curve.i promise, you can learn it in just no time. – Behnam Esmaili Nov 14 '12 at 20:35
Thanks, I marked you as the answer since you were first and it is quite simple I can see. I'm making a template picker that switches the colors of the page with the click of a button...but I don't know how to target the hover states that I have in css. I believe you are saying it's better to have js/jquery handle the hover states or mouse overs instead. I'm now wondering if jquery's toggle class can target a css hover state or if anything can so that I don't need to change my css. – Chain Nov 14 '12 at 20:48
normaly what css do is selecting sequence of html elements and apply a specific rule on them. ok.jquery has all this selectors + couple dozens of other selectors you can use (see http://api.jquery.com/category/selectors/) .once you selected your element you can do whatever you like with them.for example handle click , hover ,... events.and also add remove class , apply css style and so on. – Behnam Esmaili Nov 14 '12 at 21:01

score 1 · Answer 2 · answered Nov 14 '12 at 20:13

1

The easy way is to use jQuery.

The non-jQuery way is to use .getElementByTagName.

answered Nov 14 '12 at 20:13

Matt Burland

44,552
18
99
171

Thanks for your response too Matt – Chain Nov 14 '12 at 20:50

How do I control a css child property with javascript?

2 Answers2