将CSS样式应用于子节点

Question

这里是一个小片段，作为示例：

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

使用CSS，我可以做到这一点：

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

如何使用JavaScript实现同样的样式？

- user

---

更高效的方法是定义分层的CSS，并使用JS在子元素上添加/删除类。 - mohkhan

这就是你需要的：-https://dev59.com/6HVC5IYBdhLWcg3wvT7g - Vinay Pandey

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

演示链接

这个不是最好的演示，但你可以参考以下内容（只是为了更多了解）

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

- Mr_Green

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

- sangram parmar

---

你应该将第二行中的 pDiv 替换为 parentDiv。 - Cthulhu

Answer 3

你可以使用以下内容：

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

- Roy M J