时间戳

首页 > 解决方案 > 如何将 getElementById 与不同的 ID 名称结合起来

javascript - 如何将 getElementById 与不同的 ID 名称结合起来

问题描述

可以将 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)"
}

标签： javascript

解决方案

你可以使用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>

这样，在未来，你所要做的就是将相同的类添加到任意数量的元素中，而不是在 JS 中嵌套一个新的 ID……
选择最适合的那个。或者您甚至可以同时使用两者：'#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>

推荐阅读