Как объединить getElementById с другим именем идентификатора
Можно ли комбинировать 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)"
}
@IonutEugen он хочет, чтобы ему не приходилось настраивать размытие каждого элемента построчно, он хочет иметь возможность делать это все сразу или в меньшей базе кода. вместо Line by Line, как показано. Это моя точка зрения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Идентификаторы уникальны, поэтому, насколько я знаю, вы не можете выбрать более одного за раз. Однако вы можете выбрать несколько классов с помощью document.getElementsByClass и указать один класс для всех из них.
Понимаю. Теперь я понял. общее качество
Вы можете использовать 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/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>О, я забыл об этом. Плохо, я предлагаю еще немного документации по HTML dom.
TQ за это, я собирался переименовать все названия моего класса, когда вы пришли. Еще раз спасибо
Что ты имеешь в виду ? Привести пример. Вопрос слишком широк, чтобы ответить на него сейчас.