Question

我有以下与其他内容有关的SVG元素

<text x="370.9472783496851" y="141.05272165031482" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 10px Arial;" class="wheelnav-wheelDiv-title-basic-1" id="wheelnav-wheelDiv-title-1" transform="matrix(0.7071,-0.7071,0.7071,0.7071,8.7932,303.3224)" stroke-width="1.0360904852357105"><tspan dy="3.1620966503148225" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Multiformer II</tspan></text>

如您所见，在text元素内有一个tspan元素，我正在使用CSS样式表为其指定特定的样式，如下所示：

[class|=wheelnav-wheelDiv-title-basic]>tspan {
    fill: rgb(255, 255, 255);
    stroke: none;
    font-size: 100%;
    font-family: Lato;
}

，它工作正常，但是我想在程序运行时更改tspan的样式。我的意思是，对于JS，我已经尝试了以下方法：

for(let i=0;i<3;i++){
                        let element_class = 'wheelnav-wheelDiv-title-basic-'+i;
                        let element = document.getElementsByClassName(element_class).item(0);
                        console.log(element);
                    }

但是它给我的HTMLCollection是空的（null），所以没有子级。

编辑

顺便说一下，我还有其他元素：

wheelnav-wheelDiv-title-basic-0
wheelnav-wheelDiv-title-basic-2

发现错误

事实证明，我试图在DOM创建之前从DOM中获取元素，这就是为什么它返回null的原因。

Answer 1

在您的SVG示例中，您只有一个具有以下类的元素：

"wheelnav-wheelDiv-title-basic-1"

在执行for循环时，要查找的第一个元素是具有以下类的元素：

"wheelnav-wheelDiv-title-basic-**0**"

这就是为什么将HTMLCollection设置为空，然后在.item(0)上获取异常的原因。

如何使用JavaScript更改此伪类？

编辑

发现错误

1 个答案: