Можно ли комбинировать getElementById с другим именем? Как этого добиться?

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)"
}
1
dontbannedmeagain 31 Май 2019 в 04:08

2 ответа

Лучший ответ

Вы могли бы использовать 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 ...
Выберите тот, который лучше всего подходит. Или вы даже можете использовать оба: '#header, #menu, .onOpenBlur'

https://developer.mozilla.org/en-US/ документы / Web / API / NodeList / Foreach
https://developer.mozilla.org/en-US/ документы / Web / API / Документ / 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>
3
Roko C. Buljan 31 Май 2019 в 01:34

Идентификаторы уникальны, насколько я знаю, вы не можете выбрать более одного за раз. Однако вы можете выбрать несколько классов с помощью document.getElementsByClass и указать один класс для всех них.

0
Ionut Eugen 31 Май 2019 в 01:13