JS：特定のクラスのdivをループし、親div属性に基づいて子divを変更しますか？

Question

さて、これらのdivは、丸いエッジと、縦と横の両方のグラデーション（エッジに沿って明るく、真ん中が暗くなります）のページ全体にあります。私のデザイナーはもともとこれらのdivを固定幅と高さにしていましたが、大きな背景画像を1つだけ使用していましたが、幅と高さが柔軟になるため、背景画像を9つの小さな画像（各コーナー（50x50px）上下に2つ（高さ50px、幅1px）、左右2つ（幅1px、幅50px）、中央（1x1px）の2つです。

今、各divのための私のコードは次のようになります。私が欲しいもの

<div class="roundedbox" id="rb1" 
style="width: 859px; padding-top:10px; margin-left:34px;"> 
<div class="topleft"></div> 
<div class="topmid" style="width:759px;"></div> 
<div class="topright"></div> 
<div class="midleft" style="height: 61px;"></div> 
<div class="midmid" style="height: 61px; width:759px"></div> 
<div class="midright" style="height: 61px;"></div> 
<div class="botleft"></div> 
<div class="botmid" style="width:759px;"></div> 
<div class="botright"> 
<h2 style="margin-top:-104px; margin-left:-789px">Div's Title Goes Here</h2> 
</div> 
</div> 

は、余分なHTMLのではないトンで、私はそのシンプルなのdiv構造を持つようにしたい、この

<div class="roundedbox" id="rb1" 
style="width: 859px; height:161px; padding-top:10px; margin-left:34px;"> 
<h2>Div's Title Goes Here</h2> 
</div> 

です私がdivを作りたいときはいつも書く必要があります。次に、JSに必要なすべての内部div（topleftなど）を自動的に挿入するようにします。

これを行うにはどうすればよいですか？

または、同じエフェクト（丸められたエッジとグラデーションを持つdiv、完全にサイズ変更可能なもの）を達成する別の方法は何ですか？

Answer 1

これはまた、私の意見でもっと役に立ちます：http://css3pie.com/