Question

让它在IE7中运行。尝试通过类更改表单中输入文本字段的背景颜色。我知道IE7不支持getelementsbyClassName所以必须创建函数。我已经尝试了许多getelementsbyClassName函数的例子，但没有一个对我有用。希望有人可以为我提供解决方案。

function changecolor() {
    //i don't know what to put here
}

<input type="text" class="items">
<input type="text" class="items">
<input type="text" class="items">
<div onclick="changecolor()">Change Color</div>

Answer 1

这可以解决IE7中的问题：

function changecolor(c){
  var a,n;
  a=getElementsByTagName('INPUT'); // or a=document.all for all elements in items-class;
  for(n=0;n<a.length;a++){
   if(a[n].className=='items'){
     a[n].style.backgroundColor=c;
   }
   return;
}

您还可以在class中修改规则，但不能保证在重排页面之前真正更改颜色。

function changeColor(c){
    var sSheet,n;
    sSheet=document.styleSheets[0].rules;
    for(n=0;n<sSheet.length;n++){
        if(sSheet[n].selectorText=='.items') sSheet[n].style.backgroundColor=c;
    }
    return;
}

您可以使用id的{{1}}代替styleSheet中的索引。

Answer 2

由于您希望使用现代功能但需要支持古老的浏览器，因此最佳解决方案是使用jQuery等库。

使用jQuery你想做的事情非常简单：

<input type="text" class="items">
<input type="text" class="items">
<input type="text" class="items">
<div id="changeColor">Change Color</div>

<script>
$('#changeColor').on('click', function() {
     $('input.items').css('backgroundColor', '#0ff');
});
</script>

以下是演示：http://jsfiddle.net/ThiefMaster/kSwv8/

onclick =更改表单中同一类的所有输入文本字段背景颜色

2 个答案: