Применить стиль CSS для дочерних узлов

Question

Вот небольшой фрагмент, чтобы служить в качестве примера:

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

С помощью CSS можно сделать так:

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

Как сделать такой же стиль с JavaScript?

Answer 1

Попробуйте это: (только иметь только дочерние элементы, а не все вложенные элементы)

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

Не лучший, но вы можете обратиться ниже: (только для некоторых больше знаний)

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'); 

Answer 2

попробовать это

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

Answer 3

Вы можете использовать следующее:

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