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

【问题标题】：Is it possible to dynamically modify the style of a child element (with no id) in a div (with id)?是否可以在 div（带 id）中动态修改子元素（不带 id）的样式？
【发布时间】：2015-03-24 20:22:31
【问题描述】：

使用以下代码：

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

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

我试过了：

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

但我收到错误“未定义不是对象”。

SVG 是使用服务器端包含加载的，我无法以任何方式对其进行修改，因此我需要找到一种从外部对其进行操作的方法。

我宁愿避免使用 jQuery。

【问题讨论】：

标签： javascript html css dom svg

【解决方案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";

【讨论】：

我已经读到 querySelector 比 getElementById 慢得多，所以我试图避免它。
@Andrew Swift：我建议在您决定是否不值得考虑之前运行一个基准测试来验证这一点。
你打算多久选择一次这个元素？我确信 SVG 需要比选择此元素更多的时间来渲染。
我只选择一次，将其调整为窗口大小。确实那里并没有太大的损失，但是页面加载速度已经太慢了，所以我正在尝试优化每一个小东西。

【解决方案2】：

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

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

【讨论】：

效果很好，我会在一分钟内选择你的答案。您知道是否有更好的选择（即更直接），例如“document.getElementById('container').child(0)？
你可以使用document.querySelector('#container > svg').style.width = '400px';

【解决方案3】：

如果您可以访问它，是否可以单独使用 css 来实现这一点？

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

【讨论】：

但这并不是真正的动态。
问题是我需要用Javascript来做。该值是在页面加载时生成的，我不提前知道。
对不起，我完全错过了动态位 - 不知道怎么做。你想避免使用 jQuery 吗？你能设置一个 jsFiddle 吗？