将CSS样式应用于子节点
Apply CSS style to child nodes
下面是一个小片段作为示例:
<div id="parentDiv">
<div>child1</div>
<div>child2</div>
</div>
有了CSS,我可以做到这一点:
div#parentDiv { position: absolute; }
div#parentDiv>div { position: relative; }
如何使用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
}
}
工作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');
尝试这个
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";
}
您可以使用以下内容:
document.getElementById('parentDiv').childNodes[0].style.position = "relative";
document.getElementById('parentDiv').style.position = "absolute";
相关文章:
- 将函数的上下文应用于javascript变量
- 将CSS应用于printWindow.print();在Javascript中
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 选择<李>使用普通JavaScript的子节点,而不是孙节点
- 起始节点.js用于并行的线程池
- js循环遍历单击的元素子节点
- $scope.apply()何时应用于angular
- Javascript非常简单:'阅读更多''显示较少'应用于Wordpress的功能
- 如何将数据添加到json的子节点
- 尝试应用于<tr>在ng单击中
- 如何将javascript仅应用于1个表单中的2个表单提交按钮中的1个
- 将脚本应用于Angular 2上的输入
- Json和$scope的角度之间的差异$eval应用于JSON字符串时
- 删除HTML节点而不删除其子节点
- 如何将参数应用于String.prototype.format函数
- 仅将CSS应用于子DIV
- 用于li标记子节点onclick的Javascript代码
- 将外部CSS应用于HTML节点作为内联样式(香草Javascript/Coffeescript)
- 用于添加子节点的聚合事件/回调
- Dojo +单击LazyTreeGrid中父节点的复选框应该会自动使子节点选中How To