javascript - 是否可以在div(有id)中动态修改子元素(没有id)的样式？

Question

使用以下代码:

<div id="container">
    <svg [attributes etc.]> ... </svg>
</div>

我想动态更改 SVG 的宽度和高度。

我试过:

myObj = document.getElementById('container').getElementsByTagName('svg');
myObj.style.width = "400px";

但我收到错误“undefined is not an object”。

SVG 使用服务器端包含加载，我不能以任何方式修改它，所以我需要找到一种从外部操作它的方法。

我宁愿避免使用 jQuery。

Answer 1

出现该错误的原因是 myObj，getElementsByTagName() 的结果，是一个元素的 NodeList，因为它可能返回多个元素，并且style 未在 NodeList 上定义。不是特别有用的错误，因为它没有描述实际问题...

无论如何，只需对该集合进行索引即可获得您可以使用的元素:

myObj = document.getElementById('container').getElementsByTagName('svg');
myObj[0].style.width = "400px";

或者，如果您确定只有一个 #container > svg，请改用 querySelector():

myObj = document.querySelector('#container > svg');
myObj.style.width = "400px";