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風格

回答

相關問題