cambiar estilo a una capa

[azaz]

Tengo un div contenedor donde tengo tres div hijos de este, lo que quiero es dar estilos a estos tres div con javascript.

Código HTML:

<div id="contenedor">
   <div>uno</div>
   <div>dos</div>
   <div>tres</div>
</div>
 

con document.getElementById acedo al contenedor pero como seria para aceder a los hijos solo a ellos sin afectar el contenedor principal.
saludos

[IsaBelM]

lo puedes hacer tanto con la propiedad childNodes(), como con pseudo-elementos de css3

[azaz]

Hola, gracias por tu colaboracion lo primero, ahora cambiando el codigo fuente algo asi:

Código HTML:

<div id="contenedor">
   <div><p>uno<p></div>
   <div><p>dos</p></div>
   <div><p>tres<p></div>
</div>
 

como le doy un tamaño de ancho a los div dentro de contenedor, probe asi, no me funciona.

Código Javascript:

elemento=document.getElementById("contenedor").childNodes;
 
elemento.style.width="200px";
 

es correcto solo quiero aceder a los div no al p.

saudos.

[lubtufano]

childNodes devuelve una colección de elementos, igual a un array, se puede acceder a cada elemento usando el índice y también recorrerlos con un bucle.

Código Javascript:

elemento= document.getElementById("contenedor").childNodes;
 
for(i=0; i<elemento.length; i++) {
  elemento[i].style.width="200px";
}
 

Yo usaría getElementsByTagName() ya que childNodes presenta algunos inconvenientes con el navegador firefox, su uso es muy parecido.

Código Javascript:

elemento= document.getElementById("contenedor").getElementsByTagName("div");
 
for(i=0; i<elemento.length; i++) {
  elemento[i].style.width="200px";
}
 

[azaz]

Vale gracias por la colaboracion a los dos saludos.

[IsaBelM]

veo que has cambiado el layout y en un futuro puede que lo vuelvas a cambiar por lo que lo mas conveniente es hacer un código reutilizable. pongamos que cambias a esto

<div id="contenedor">
<span>uno</span>
<div><p>dos</p></div>
<p>tres</p>
</div>

este código te vale tanto para el layout que estás usando ahora, como este otro que te presento

Array.prototype.forEach.call(document.querySelecto rAll('#contenedor > *'), function(v, i, a) {

a[i].style.width = '200px';
});