Id's in array javascript

Id's in array javascript

本文关键字：in array javascript Id      更新时间：2023-09-26

在我的html脚本中有一组id。是否有一个适当的方法，把它们在javascript数组改变所有id的背景("blauw*)一次?

下面是我的HTML代码:

<table width="90%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw1" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw2" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw3" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw4" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw5" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td><a href="#"><img id="blauw6" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td><a href="#"><img id="blauw7" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td><a href="#"><img id="blauw8" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw9" src="images/lamp_uit.png" width="32" height="63"></a></td>
                  <td>&nbsp;</td>
                  <td><a href="#"><img id="blauw10" src="images/lamp_uit.png" width="32" height="63"></a></td>
                </tr>
              </table>

您可以使用querySelectorAll()通过id属性的子字符串选择元素:

document.querySelectorAll("img[id^=blauw]");

小提琴

例如:

var images = document.querySelectorAll("img[id^=blauw]");
for (var i = 0; i < images.length; i++) {
    images[i].src = "";
}

指出:

  • querySelectorAll()和CSS3选择器部分支持IE8;

  • 你真的应该使用类来选择一组元素，比如class="blauw"。

    通过添加一个类，你可以摆脱一些属性在你的标签:

    .blauw {
    width: 32px 
    height: 63px
}
<img class="blauw" src="images/lamp_uit.png" />

不完全是。id在整个文档中是唯一的。CSS不允许在ID选择器中使用通配符，例如

#blauw* { color: red }

是非法语法。你必须写一个非常浪费/低效的:

#blauw1, #blauw2, ..., #blauw999999 { color: red }

如果你想把它们都涂成一样的颜色，为什么不给它们一个类呢?

.blauw { color: red}
<img id="..." class="blauw" ... />
              ^^^^^^^^^^^

你应该能够为所有这些元素添加一个类，然后使用getElementsByClassName将这些元素ref in到JS数组

最好使用blauw类。

但假设id的最后部分是从1开始的连续整数，

var i = 0, arr = [], el;
while(el = document.getElementById('blauw' + ++i)) arr.push(el);
相关文章：