使用JavaScript getElementById定位CSS

Question

简单的问题，我正在使用getElementById来定位我的div standby并更改其样式。现在，我不能因为对任何事物的热爱而找到如何将我在CSS中编写的内容定位为#standby img，即img内的standby标记。我将如何定位并使用JavaScript更改其样式？

Answer 1

对于所有浏览器中的普通javascript，它将是：

var imgs = document.getElementById("standby").getElementsByTagName("img");

在更高级的浏览器中，您可以使用：

var imgs = document.querySelectorAll("#standby img");

每个都返回一个nodeList（就像一个DOM元素数组），然后你可以迭代它。

---

然后你可以像这样迭代其中任何一个的结果：

for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.width = "300px";
}

---

如果您知道该div中只有一个图像，那么您可以这样做而不是迭代多个图像：

document.getElementById("standby").getElementsByTagName("img")[0].style.width = "300px";

Answer 2

使用document.querySelector获取纯JavaScript解决方案：

document.querySelector("#erg img");

然后，您可以像使用getElementById检索的元素一样更改其样式。

Answer 3

您可以使用jQuery轻松完成此操作。 $('#standby img')。值得研究。

Answer 4

所以你已经使用standby获得了getElementById()元素。

要获取其中的img元素，您需要使用getElementsByTagName()

var standby = document.getElementById('standby');
var standbyImgs = standby.getElementsByTagName('img');

我猜你已经有了第一行，所以你只需要第二行。或者将它们组合成一个。

重要的是要注意getElementsByTagName()返回一个元素数组，而不是像getElementById()这样的单个元素。因为很明显，那里可能有多个img，而应该只有一个具有给定ID的元素。