点击可展开切换菜单时修改WordPress站点头部多元素样式求助

需求说明 #

基于WordPress+Elementor Pro开发的网站，需实现点击左上角下拉菜单时完成以下样式修改：

• 头部背景色改为白色
• 右上角两个按钮的文字及边框颜色改为 #2E324D
• 中央Logo替换为蓝色版本（图片地址：http://prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png）

原代码问题分析 #

你编写的代码未生效，核心问题有两个：

1. 方法名错误：getElementByClassName 应为复数形式 getElementsByClassName，该方法返回元素集合，需通过索引获取单个元素
2. DOM加载时机问题：脚本可能在页面元素未加载完成时执行，导致无法获取目标元素

完整实现代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取菜单切换按钮（Elementor默认类）
  const menuToggle = document.querySelector('.elementor-menu-toggle');
  // 获取头部容器
  const header = document.querySelector('.elementor-element-a58d576');
  // 获取右上角按钮（根据实际类名调整，此处用Elementor默认按钮类）
  const headerButtons = document.querySelectorAll('.elementor-button');
  // 获取Logo图片元素
  const logoImg = document.querySelector('.elementor-widget-theme-site-logo img');
  // 保存Logo原始地址，用于切换恢复
  const originalLogoSrc = logoImg ? logoImg.src : '';
  const blueLogoSrc = 'http://prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png';

  if (!menuToggle || !header) return;

  // 监听菜单点击事件
  menuToggle.addEventListener('click', function() {
    // 切换头部背景色类
    header.classList.toggle('header-white-bg');
    
    // 批量切换按钮样式类
    headerButtons.forEach(btn => {
      btn.classList.toggle('btn-dark-style');
    });

    // 根据头部状态切换Logo
    if (logoImg) {
      logoImg.src = header.classList.contains('header-white-bg') ? blueLogoSrc : originalLogoSrc;
    }
  });
});

配套CSS（添加到Elementor自定义CSS或WPCode的CSS片段中）：

.header-white-bg {
  background-color: white !important;
}

.btn-dark-style {
  color: #2E324D !important;
  border-color: #2E324D !important;
}

代码说明 #

1. DOM加载监听：通过DOMContentLoaded确保脚本在页面元素完全加载后执行，避免元素获取失败
2. 元素获取优化：用querySelector/querySelectorAll替代原生集合方法，支持更灵活的选择器语法
3. 类切换逻辑：通过添加/移除自定义CSS类修改样式，比直接操作style属性更易维护，且支持菜单收起时自动恢复原始样式
4. Logo状态记忆：保存原始Logo地址，点击时根据头部类的状态双向切换图片

使用步骤 #

1. 将JS代码通过WPCode插件设置为页面底部加载的脚本
2. 将CSS代码添加到Elementor的「自定义CSS」面板，或通过WPCode创建CSS片段
3. 若右上角按钮的类不是elementor-button，需用浏览器开发者工具查看实际类名替换

内容的提问来源于stack exchange，提问作者Michele