如何将getElementById与其他ID名称结合使用

Question

是否可以将getElementById与其他ID名称组合？如何实现？

function onOpen(){
    var x1 = document.getElementById("header");
    var x2 = document.getElementById("menu");
    var x3 = document.getElementById("program");
    x1.style.filter = "blur(5px)"
    x2.style.filter = "blur(5px)"
    x3.style.filter = "blur(5px)"
}

Answer 1

您可以使用querySelectorAll，然后使用NodeList.forEach()

进行迭代

function onOpen(){
  const els = document.querySelectorAll("#header, #menu, #program");
  els.forEach(el => el.style.filter = "blur(5px)");
}

onOpen();

<div id="header">TEST</div>
<div id="menu">TEST</div>
<div id="program">TEST</div>

或者，如果您想用额外的类污染 HTML，则可以使用

function onOpen(){
  const els = document.querySelectorAll(".onOpenBlur");
  els.forEach(el => el.style.filter = "blur(5px)");
}

onOpen();

<div class="onOpenBlur" id="header">TEST</div>
<div class="onOpenBlur" id="menu">TEST</div>
<div class="onOpenBlur" id="program">TEST</div>

那样，将来，您要做的就是将相同的类添加到任意数量的元素中，而不是将新的ID嵌套到JS中。
选择最合适的那个。或者甚至可以同时使用两者：'#header, #menu, .onOpenBlur'

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

一种略有不同的方法

另一个想法是只向body添加一个类，然后让CSS发挥作用：

function toggleOpen(){
  document.documentElement.classList.toggle('is-open')
}

toggleOpen();

.is-open .on-open-blur {
  filter: blur(5px);
}

<div class="on-open-blur" id="header">TEST</div>
<div class="on-open-blur" id="menu">TEST</div>
<div class="on-open-blur" id="program">TEST</div>

Answer 2

编号是唯一的，据我所知一次最多只能选择一个。但是，您可以使用document.getElementsByClass选择多个类，并为所有这些类指定一个类。