单击可扩展切换菜单即可更改多个元素颜色

Question

我需要一个 Javascript 函数，当我单击左上角的下拉菜单时，它允许我更改正在开发的网站标题中某些元素的颜色。该网站是在 Wordpress 中使用 Elementor Pro 制作的。有三个元素应该改变颜色：中央徽标、右上角的两个按钮以及整个标题的背景，使其成为白色作为下拉菜单的背景。两个按钮应变为以下颜色，文本和边框颜色为#2E324D；而徽标应动态替换为已加载到网站媒体库中的蓝色变体（src：http:///prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png）。标题背景为预期的白色。我附上最终结果的参考图像。这里是网站页面的链接：https://prova.lamaielletta.it/

由于没有 JavaScript 经验，我尝试独立编写第一个函数，该函数至少在单击下拉菜单按钮时更改标题的背景颜色，使其成为白色作为菜单本身的背景。在编写的函数下方，使用类选择器来标识菜单按钮，我向其中添加了单击函数，因此标题的背景颜色必须更改。

<script>
const menu = document.getElementByClassName('elementor-menu-toggle');

menu.addEventListener('click', function onClick(event) {
  const header = document.getElementByClassName('elementor-element elementor-element-a58d576 e-con-full e-flex e-con e-parent');

  header.style.backgroundColor = 'white';

});
</script>

为了将其插入正文，我使用了 WPCode 插件。但这没有用。我就卡在这一步了

Answer 1

document.getElementsByClassName(x)

为您提供具有类 x 的所有元素，换句话说，它返回一个集合

所以你应该像这样使用它

menu[0].addEventListener

如果你想对所有元素做一些事情（改变样式），你应该使用 for-loop