Question

我已经解决了，但是我只是想知道是否有更有效的代码编写方式

function p(){
    document.getElementById("boom").style.display = "block";
    document.getElementById("boom1").style.display = "block";
    document.getElementById("boom2").style.display = "block";
    document.getElementById("boom3").style.display = "block";
}
p();

结果是我所期望的，但我只是想知道是否有更简单的编写方法

Answer 1

您可以对所有元素使用公共类将它们分组（或使用组合选择器），然后使用querySelectorAll（如果使用公共类，则使用getElementsByClassName）获取所有元素，并在返回的NodeList集合，请使用NodeList#forEach方法（polyfill for older browser）。

function p(){
    document.querySelectorAll(".common-class").forEach(ele => ele.style.display = "block");
    // or .forEach(({style}) => style.display = "block");
}

p();

function p() {
  var all = document.querySelectorAll(".common-class");
  all.forEach(({ style }) => style.display = "block");
}
p();

div {
  display: none
}

<div id="boom" class="common-class">boom</div>
<div id="boom1" class="common-class">boom1</div>
<div id="boom2" class="common-class">boom2</div>
<div id="boom3" class="common-class">boom3</div>

是否有使用javascript控制CSS元素的更有效方法

1 个答案: