是否可以在div（带id）中动态修改子元素（没有id）的样式？

Question

使用以下代码：

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

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

我试过了：

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

但我收到错误＆＃34; undefined不是对象＆＃34;。

使用服务器端include 加载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";

Answer 2

getElementsByTagName返回类似数组的集合对象。因此，您需要迭代集合，例如：

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

Answer 3

单独使用css可以实现这一点，只要你有权访问它？

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