Question

我有一个改变七个div的宽度的函数。现在它看起来像这样。

 document.getElementById('monday7').style.width = "76";
 document.getElementById('tuesday7').style.width = "76";
 document.getElementById('wednesday7').style.width = "76";
 document.getElementById('thursday7').style.width = "76";
 document.getElementById('friday7').style.width = "76";
 document.getElementById('saturday7').style.width = "76";
 document.getElementById('sunday7').style.width = "76";

这完美无缺，但我需要像上面那样重复20次类似的代码。所以我有以下问题。

如何一次更改所有七个div宽度？我的意思是类似的东西：
```
document.querySelectorAll('monday7, tuesday7').style.width = "76";
```
（哪个不起作用）。
这会加快加载时间，与上面一行相比，有七行代码吗？

提前致谢

Answer 1

你可以给他们所有的课，然后做

var elements = document.getElementsByClassName("CLASSNAME");
for(var i = 0; i<elements.length; i++){
    elements[i].style.width = "76";
}

元素是所有元素的数组，然后您只需遍历它并将它们全部设置。它需要对HTML进行微小的更改，但会为JS节省大量空间。

我不知道加载时间虽然可能稍微慢一点或大约相同。

Answer 2

jQuery也使这个变得相当简单。我建议先添加一个类，这样可以使用一个选择器访问所有元素。所以它看起来像：

<div class="widthChange" id="monday7"></div>
<div class="widthChange" id="tuesday7"></div>
...

然后你的jQuery看起来像：

$('.widthChange').css('width', '76px');

简明。

一次更改多个div的属性

2 个答案: