javascript - JavaScriptでCSSをターゲットにするgetElementById

Question

簡単な質問ですが、getElementByIdを使用してdivをターゲットにしstandby、スタイルを変更しています。#standby imgさて、CSSに記述されているもの、つまり、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に画像が1つしかないことがわかっている場合は、複数の画像を繰り返すのではなく、これを行うことができます。

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

Answer 2

純粋なJavaScriptソリューションにはdocument.querySelectorを使用します。

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');

すでに最初の行があると思うので、2番目の行が必要です。または、それらを1つに結合します。

getElementsByTagName()のような単一の要素ではなく、要素の配列を返すことに注意してくださいgetElementById()。明らかに、そこには複数の要素が存在する可能性がありますがimg、特定のIDを持つ要素は1つだけである必要があります。