是否可以动态修改 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是使用服务器端include加载的，我无法以任何方式修改它，所以我需要找到一种从外部操作它的方法。

我宁愿避免jQuery。

Answer 1

getElementsByTagName returns 类似数组的集合对象。因此，您需要遍历集合，例如：

myObj = document.getElementById('container').getElementsByTagName('svg');
myObj[0].style.width = "400px";//myObj[0] refers to first found svg element

Answer 2

仅用 css 就可以实现这一点，前提是您可以访问它？

#container {
    svg {
        width: 400px;
    }
}

Answer 3

您收到该错误的原因是因为 myObj，getElementsByTagName() 的结果，是一个元素的 NodeList，因为它可能 return 多个元素，并且 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";

Is it possible to dynamically modify the style of a child element (with no id) in a div (with id)?