JavaScript中的子Div风格

我有一个预览框可以获取颜色，然后在用户进行更改时进行更改。不过，我有一个需要changine的子div。我怎么可以通过获取id元素来选择孩子div？这是Java脚本我有在此刻，我要如何改变这个，所以我能得到孩子的div前变色JavaScript中的子Div风格

document.getElementById("flip3D").style.backgroundColor=p1; 
#flip3D{ 
    width:200px; 
    height:200px; 
    margin:20px; 
    float:left; 
} 
#flip3D > .front{ 
    ... style stuff is all there just to much toput in and worry about 
}

来源

2014-01-12 Christopher Craven

我不明白你在这里问的，JS或CSS？ –

你的意思是这样的吗？

var front = document.querySelectorAll('#flip3D .front'); 
for(var i=0; i<front.length; i++){ 
    front[i].style.backgroundColor = 'red'; 
}

或类似：

var flipEl = document.getElementById("flip3D"); 
var frontEl = flipEl.getElementsByClassName('front'); 
for(var i=0; i<frontEl.length; i++){ 
    frontEl[i].style.backgroundColor = p1; 
}

为什么不使用CSS做呢？（你的问题不太清楚，所以我的双手被缚）

来源

2014-01-12 15:28:17

您可以用.childNodes()和.children()去（谷歌会给你很多的学习资源，为这两种方法。）

他们将选择子元素帮助DOM内的特定元素。

来源

2014-01-12 15:30:08

我的第一个建议是使用jQuery进行这种类型的操作。它使导航DOM和更改属性变得更容易。

我的第二个建议是控制两个元素的颜色与类。所以你的CSS可能是这个样子：

#flip3D{ 
    width:200px; 
    height:200px; 
    margin:20px; 
    float:left; 
    background: /*whatever you want the initial color to be*/; 
} 

#flip3D > .front { 
    /*Initial styling*/ 
} 

#flip3D.stateChanged{ 
    background: /*Whatever you want the new color to be*/; 
} 

#flip3D.stateChanged > .front { 
    /*New styling*/ 
}

然后，在JavaScript，你会改变类是这样的：（使用toggleClass）

jQuery的例子：

jQuery('#flip3D').toggleClass('stateChanged');

你也可以做在香草JavaScript的类操作，但它更混乱。类似这样的：

var ele = document.getElementById('#flip3D'); 
if(ele.className == 'stateChanged') 
    ele.className = ''; 
else 
    ele.className = 'stateChanged';

来源

2014-01-12 15:45:40 Nate

最简单的方法就是使用CSS。将背景颜色更改为继承，这样他们就会拥有父母的颜色。

.child-node { 
    background-color: inherit; 
}

来源

2014-01-12 15:47:02 sousatg

JavaScript中的子Div风格

回答

相关问题