How to select all children of an element with javascript and change CSS property?
<p>I am working on a project that has a div with 32 children. I need to create a dropdown menu that will change the background of each div and the parent. For the other parts of the project that don't have children, I have been using the following code:</p>

<pre><code>function changediv(color) {
document.getElementById('div1').style.background = color;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;select&gt;
&lt;option onClick="changediv('#555');"&gt;Hex&lt;/option&gt;
&lt;option onClick="changediv('blue');"&gt;Colorname&lt;/option&gt;
&lt;option onClick="changediv('url(example.com/example.png)');"&gt;Image&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I could just add a different ID to each child (id1,id2,id3,...), but there are 32 children and not only would I have to add 32 IDs, but also 32 lines of Javascript. There has to be a better way; somehow selecting children or even changing the actual CSS code that selects the children.</p>

<p>Thanks, Ian</p>
