使用Javascript修改使用同一个class的控件

Question

<style   type= "text/css "> 
    .aa{ 
        width:20px; 
    } 
    .bb{ 
        width:40px; 
    } 
</style>用js循环查找所有class="aa"的textbox，然后把所有class="aa"替换成class="bb"如果这些textbox都在一个特定的区域，那么就先用正则抓取该区域的所有代码再循环找
如果这些textbox都毫无规律可言，那么就从整个页面的源码里查找...

Answer 1

<style   type= "text/css "> 
    .bb{ 
        width:30px; 
    } <div id="test">
<input   class= "aa "   name= "a1 "   /> 
<input   class= "aa "   name= "b2 "   /> 
<input   class= "aa "   name= "c3 "   /> 
</div>js:
var x = $("test");
var y = x.getElementsByTagName("test");
for (var i = 0;i < y.length; i++)
{
y[i].className = "bb";
}

Answer 2

代码改下。有点不对，
var x = $("test");
var y = x.getElementsByTagName("input");
for (var i = 0;i < y.length; i++)
{
    if(y[i].className == "aa")
    {
      y[i].className = "bb";
    }
}

Answer 3

也就是没有办法通过Js修改Style的Class里的值，只能根据需要做多个Class
然后修改元素的className还有没有别的办法呢？

Answer 4

<style type="text/css">
.aa
{
width:20px;
}
</style><input name="a1" class="aa" type="text" /><br />
<input name="b2" class="aa" type="text" /><br />
<input name="c3" class="aa" type="text" /><br /><input type="button" value="确定" onclick="aa();" /><script language="javascript" type="text/javascript">
function aa()
{
var styleSheets = document.styleSheets;
var rules = styleSheets[0].rules;
for (var i=0;i<rules.length;i++)
{
if (rules[i].selectorText == ".aa")
{
rules[i].style.width = "200px";
}
}
}
</script>

Answer 5

用于firefox<style type="text/css">
.aa
{
    width:20px;
}
</style><input name="a1" class="aa" type="text" /><br />
<input name="b2" class="aa" type="text" /><br />
<input name="c3" class="aa" type="text" /><br /><input type="button" value="确定" onclick="aa();" /><script language="javascript" type="text/javascript">
function aa()
{
    var styleSheets = document.styleSheets;
    var cssRules = styleSheets[0].cssRules;
    for (var i=0;i<cssRules.length;i++)
    {
        if (cssRules[i].selectorText == ".aa")
        {
            cssRules[i].style.width = "200px";
        }
    }
}
</script>