应用CSS样式的子节点

这里是小片段作为例子：应用CSS样式的子节点

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

使用CSS我可以这样做：

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

如何做相同的造型与JavaScript？

来源

2013-07-09 user

的更有效的方法来定义分层CSS和使用JS添加/上删除班这些孩子。 – mohkhan

这就是你需要的：-http：//stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript –

试试这个：（仅仅只有子元素，并不是所有的嵌套元素）

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

来源

2013-07-09 05:17:37

试试这个

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

来源

2013-07-09 04:56:45

你应该用'parentDiv'在第二行代替'pDiv'。 – Cthulhu

你必须循环或它不会工作 – bfavaretto

尝试更新的答案 –

-1

您可以使用以下方法：

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

来源

2013-07-09 05:13:18

应用CSS样式的子节点

回答

相关问题