Targeting CSS with JavaScript getElementById

本文关键字：getElementById JavaScript with CSS Targeting 更新时间：2023-09-26

真的很简单，我使用getElementById来瞄准我的div standby并更改其样式。现在，我不能为任何的爱找出如何目标是什么写在我的CSS作为#standby img，也就是说，img标签在standby。我该如何瞄准这一点并用JavaScript改变它的样式?

对于所有浏览器中的纯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";

使用文档。纯javascript解决方案的querySelector:

document.querySelector("#erg img");

然后您可以像使用getElementById获取元素一样更改它的样式。

使用jQuery可以很容易地做到这一点。$('#standby img')。

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

要获得img元素，您需要使用getElementsByTagName()

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

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

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