Question

我有一个班级，其中有大号没有。 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＆amp;我不想按名称对每个id进行硬编码，如：

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

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

Answer 1

我知道你正在尝试对班级里面的所有子div做些什么。

使用您的原始选择并迭代您要应用状态的所有子div，例如this question。

所以：

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

Answer 2

你可以试试这个，

var elements = document.querySelectorAll(".p5pg5QXlX-an-stage > div");
Array.prototype.forEach.call(elements, function(el, i){
     el.style.WebkitAnimationPlayState="paused";
});

Answer 3

如果要访问单个唯一的HTML元素，

document.getElementById("p5pg5QXlX-an-obj-2")是一个正确的语句。您可以使用Javascript p5pg5QXlX-an-obj-2"替换＆＃34; var以使选择动态，例如：

var id;
document.getElementById(id)

希望这可能会有所帮助。

Answer 4

您可以使用css或JavaScript直接定位id。没有两个元素应该具有相同的id。 catch适用于JavaScript，document.getElementById(id_string)适用于CSS

Answer 5

据我所知，到目前为止，你正试图用div孩子做点什么我建议使用通配符来选择所有div子项：

var elems = document.querySelectorAll('div[id^="p5pg5QXlX-an-obj-"]');
for (var i = 0, len = elems.length; i < len; i++){
    console.log(elems[i]);
}

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

5 个答案: