Question

我有一个获取颜色的预览框，然后在用户执行时更改它。但是我有一个需要changine的孩子div。我怎样才能通过id获取元素来选择子div？这是我目前的java脚本，我如何改变这一点，以便我可以让孩子前面改变颜色

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
}

Answer 1

你的意思是这样的吗？

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呢？（你的问题很明显，所以我的双手并列）

Answer 2

您可以使用.childNodes()和.children()（Google会为您提供这两种方法的大量学习资源。）

它们将有助于在DOM中选择特定元素的子元素。

Answer 3

我的第一个建议是使用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中你会改变这样的类：

jQuery示例（使用toggleClass）：

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

你也可以在vanilla javascript中进行类操作，但它更麻烦。像这样：

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

Answer 4

执行此操作的最简单方法是使用CSS。将背景颜色更改为继承，这样他们将总是拥有其父颜色。

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

javascript中的儿童Div样式

4 个答案: