JS - getElementsByClassName 数组，然后获取数组内的元素

JS - getElementsByClassName array, then get elements inside the array

本文关键字：数组 元素 获取 getElementsByClassName JS 然后      更新时间：2023-09-26

我有一个带有几个矩形的 svg 脚本：

<g class="1">
    <rect x="80.181" y="156.8" width="64.394" height="54.973"/>
</g>
<g class="2">
    <rect x="147.067" y="156.8" width="23.89" height="54.973"/>
</g>
<g class="1">
    <rect x="173.45" y="156.8" width="22.433" height="54.973"/>
</g>
<g class="3">
    <rect x="198.375" y="156.8" width="39.668" height="54.973"/>
</g>
(...)

我想创建一个函数来定义类中所有矩形的填充，例如 1。像这样：

function FillRect() {
    var rect = document.getElementsByClassName('1');
    for (var i = 0; i < rect.length; i++) {
        document.rect[i].querySelector('rect').style.fill="blue";
    }
}

我不确定如何做最后document.rect[i].querySelector部分。

你可以简单地做：

var rect = document.querySelectorAll(".1 rect");
for (var i = 0; i < rect.length; i++) {
    rect[i].style.fill="blue";
}

你不需要引用文档对象。

function FillRect() {
    var rect = document.getElementsByClassName('1');
    for (var i = 0; i < rect.length; i++) {
        rect[i].querySelector('rect').style.fill="blue";
    }
}

函数 FillRect（） { var rect = document.getElementsByClassName（'1'）;

for (var i = 0; i < rect.length; i++) {
    rect[i].getElementsByTagName('rect').style.fill="blue";
}}

这应该做你想要的。如果你愿意，你可以考虑jQuery。

相关文章：