Apply CSS style to child nodes

Question

Here is small fragment to serve as example:

<div id="parentDiv">
    <div>child1</div>
    <div>child2</div>
</div>

With CSS I can do this:

  div#parentDiv { position: absolute; }
  div#parentDiv>div { position: relative; }

How to do same styling with javascript?

The more efficient method would be define hierarchical CSS and use JS to add/remove classes on the children. — mohkhan, Jul 09 '13 at 04:52
This is what you need :-http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Vinay Pandey, Jul 09 '13 at 04:54

Mr_Green · Accepted Answer · 2013-07-09T05:38:04.160

Try this: (to just have only child elements, not all nested elements)

var pDiv = document.getElementById('parentDiv');
var cDiv = pDiv.children;
for (var i = 0; i < cDiv.length; i++) {
    if (cDiv[i].tagName == "DIV") {   //or use toUpperCase()
        cDiv[i].style.color = 'red';  //do styling here
    }
}

Working Fiddle

Not the best one, but you can refer the below: (just for some more knowledge)

Node.prototype.childrens = function(cName,prop,val){   
    //var nodeList = [];
    var cDiv = this.children;
    for (var i = 0; i < cDiv.length; i++) {
        var div = cDiv[i];
        if (div.tagName == cName.toUpperCase()) {
            div.style[prop] = val;
            //nodeList.push(div);
        }
    }
   // return nodeList;
}

var pDiv = document.getElementById('parentDiv');
pDiv.childrens('div','color','red');

sangram parmar · Answer 2 · 2013-07-09T05:22:31.030

2

try this

    var parentDiv1 = document.getElementById('parentDiv');
    var childDiv = parentDiv1.getElementsByTagName('div');
    parentDiv.style.position = "absolute";
    for (var i = 0; i < childDiv.length; i++) {
        childDiv[i].style.position = "relative";
    }

edited Jul 09 '13 at 05:22

answered Jul 09 '13 at 04:56

sangram parmar

8,462
2
23
47

You should replace `pDiv` in second line with `parentDiv`. – Cthulhu Jul 09 '13 at 05:01

score -1 · Answer 3 · edited Jul 09 '13 at 05:20

-1

You can use the following :

document.getElementById('parentDiv').childNodes[0].style.position = "relative";
document.getElementById('parentDiv').style.position = "absolute";

edited Jul 09 '13 at 05:20

Mr_Green

40,727
45
159
271

answered Jul 09 '13 at 05:13

Roy M J

6,926
7
51
78

Apply CSS style to child nodes

3 Answers3