日期:2014-05-16  浏览次数:20375 次

使用Javascript修改使用同一个class的控件
页面上有若干个元素,使用了同一个class,我能不能通过Javascript修改class里的宽度,达到这若干个元素同时宽度改变的目的呢?

比如下面的代码,我放置一个按钮,可以根据需要同时修改下面3个Textbox的宽度:
<style type="text/css">
  .aa{
  width:20px;
  }
</style>
<input class="aa" name="a1" />
<input class="aa" name="b2" />
<input class="aa" name="c3" />

注:因为各个元素不一定属于同一个childNodes组,而且名字也可能没有规律可言
所以通过循环这些元素来一个个设置style.width,不太可能

请高手指点。

------解决方案--------------------
<style type= "text/css "> 
.aa{ 
width:20px; 

.bb{ 
width:40px; 

</style>

用js循环查找所有class="aa"的textbox,然后把所有class="aa"替换成class="bb"

如果这些textbox都在一个特定的区域,那么就先用正则抓取该区域的所有代码再循环找
如果这些textbox都毫无规律可言,那么就从整个页面的源码里查找...

------解决方案--------------------
代码改下。有点不对,

JScript code

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";
    }
}

------解决方案--------------------
JScript code

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

------解决方案--------------------
用于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>