javascript - 如何在 HTML 中修改所有选定类的子 div？

Question

• 我有一个类(class)，其中有很多没有。 div的。
• 我想访问类中的那些 id 并应用动画播放状态属性

这是我的代码:

<div class="p5pg5QXlX-an-stage">
                <div id="p5pg5QXlX-an-obj-1">
                    <div><img height="416" width="320" src="assets/overlay1.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-2">
                    <div><img height="416" width="320" src="assets/float.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-3">
                    <div><img height="416" width="320" src="assets/temple.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-4">
                    <div><img height="416" width="320" src="assets/go.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-5">
                    <div><img height="416" width="320" src="assets/da.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-6">
                    <div><img height="416" width="320" src="assets/va.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-7">
                    <div><img height="416" width="320" src="assets/ri.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-8">
                    <div><img height="416" width="320" src="assets/matha.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-9">
                    <div><img height="416" width="320" src="assets/pu.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-10">
                    <div><img height="416" width="320" src="assets/shka.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-11">
                    <div><img height="416" width="320" src="assets/raa.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-12">
                    <div><img height="416" width="320" src="assets/luu.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-13">
                    <div><img height="480" width="320" src="assets/page1hw.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-14">
                    <div><img height="416" width="320" src="assets/panel.png">
                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-15"></div>
                <div id="p5pg5QXlX-an-obj-16">
                    <div><img height="89" width="89" src="assets/rplay.png">

                    </div>
                </div>
                <div id="p5pg5QXlX-an-obj-17">
                <img height="49" width="49" src="assets/555b175b463b9mFtlk8d8BP4hFbiCHF1w.png">
                <span></span>
                </div>
            </div>

我想将动画状态属性应用于所有 ID，所以请告诉我如何访问类中的 ID？

我这样做了:

var id=document.getElementByClassName("p5pg5QXlX-an-stage");
id.style.WebkitAnimationPlayState="paused";

但它没有用，我在 inspect 元素中看到 var id 给出了一堆 id，所以我如何访问所有 id 并且我不想按名称对每个 id 进行硬编码，例如:

document.getElementById("p5pg5QXlX-an-obj-2").WebkitAnimationPlayState="paused";

因为我想要这个的通用代码所以请帮助我并尝试在 javascript 中给出 sol'n。

Answer 1

我知道您正在尝试对类(class)内的所有子 div 做一些事情。

使用您的原始选择并遍历您想要应用状态的所有子 div，如 this question .

所以:

var children = document.getElementsByClassName("p5pg5QXlX-an-stage")[0].childNodes;
children.forEach(function(node){
  node.style.WebkitAnimationPlayState="paused";
})