Javascript 在JS中更改子SVG元素的属性

我有一个带有SVG对象和一些Javascript的页面。当我点击一个特定的G元素时，我希望该G元素中任何子元素的填充颜色都会改变，但只改变与特定类匹配的子元素

SVG：

脚本：

    function routeButton(item) {
        for (var idx = 0; idx < item.childNodes.length; idx++) {
            var child = item.childNodes[idx];
            if (child.hasOwnProperty('classList') && child.classList.contains('nxButtonFace')) {
                child.setAttribute('fill', 'white');
            }
        }
    };

功能路由按钮（项目）{
对于（var idx=0；idx

因此，在这种情况下，只有第二个椭圆应该改变。但是，单击G元素时，不会发生任何事情，因为没有一个子元素似乎是以classList作为属性的元素。删除hasOwnProperty检查会导致child.classList方法失败（null）。FWIW，item.childNodes.length是9，而不是4

请问我错过了什么？谢谢。

任何元素都没有自己的属性

classList

。它们都是从

元素

继承的

只需迭代

子节点

，而不是

子节点

简单使用

item.querySelectorAll(":scope > .nxButtonFace")
  .forEach((child) => child.setAttribute('fill', 'white'));

如果浏览器支持不相关，那么函数体也可能足够了

如果不起作用（例如），只需检查

child.classList

而不是

child.hasOwnProperty（'classList'）

中的

If

条件：

if (child.classList && child.classList.contains('nxButtonFace'))

If也不受支持（例如，SVG直到Edge 16.16299），请使用polyfill或选中If（child.className和child.className.indexOf（'nxButtonFace'）>-1）。

任何元素都没有自己的属性

classList

。它们都是从

元素

继承的

只需迭代

子节点

，而不是

子节点

简单使用

item.querySelectorAll(":scope > .nxButtonFace")
  .forEach((child) => child.setAttribute('fill', 'white'));

如果浏览器支持不相关，那么函数体也可能足够了

如果不起作用（例如），只需检查

child.classList

而不是

child.hasOwnProperty（'classList'）

中的

If

条件：

if (child.classList && child.classList.contains('nxButtonFace'))

---

If也不受支持（例如，SVG直到Edge 16.16299），请使用polyfill或选中If（child.className&&child.className.indexOf（'nxButtonFace'）>-1）。

您考虑过只使用CSS吗

function routeButton(item) {
  item.setAttribute("class", "selected");
};


.selected > .nxButtonFace {
  fill: white;
}

---

你想过只用CSS吗

function routeButton(item) {
  item.setAttribute("class", "selected");
};


.selected > .nxButtonFace {
  fill: white;
}

---

为什么不使用

.children

而不是

.childrendes

？使用.childrendes弹出错误“无法获取未定义或空引用的属性“长度”（即“for”中的item.children.length）。为什么不使用

.childrendes

而不是

.childrendes

？使用.children弹出错误“无法获取属性“长度”未定义或空引用的属性（即“for”中的item.children.length）。

child.classList.contains（）

引发异常：无法获取未定义或空引用的属性“contains”

item.children

也为空（谢谢-现在我明白为什么了，它是IE9）。您的

if

条件是否类似于

if（child.classList&&child.classList.contains（'nxButtonFace'））

？可能也不支持。使用替代品或polyfill。嗯，我需要更深入地研究一下——这是一个WPF WebBrowser组件，快速搜索表明它在默认情况下甚至可能不是IE9。明天我会进一步挖掘-谢谢你的指点。@GeoffM IE9不支持你正在使用的很多东西。SVG元素的兼容性更差。

child.classList.contains（）

引发异常：无法获取未定义或空引用的属性“contains”

item.children

也为空（谢谢-现在我明白为什么了，它是IE9）。您的

if

条件是否类似于

if（child.classList&&child.classList.contains（'nxButtonFace'））

？可能也不支持。使用替代品或polyfill。嗯，我需要更深入地研究一下——这是一个WPF WebBrowser组件，快速搜索表明它在默认情况下甚至可能不是IE9。明天我会进一步挖掘-谢谢你的指点。@GeoffM IE9不支持你正在使用的很多东西。SVG元素的兼容性甚至更差。我想先了解如何在纯JS和SVG中实现这一点，但这确实有效，而且非常简洁，而且有效！谢谢。我想先了解如何在纯JS和SVG中实现它，但这确实有效，而且非常简洁——而且有效！谢谢