纯JS技术问题：切换元素第三类样式时出现Cannot read property 'toggle'报错

DevOps 小满

2026-5-25

嘿，别担心，刚学JavaScript遇到这种问题太正常啦！咱们一步步拆解解决～

先搞懂报错原因

你看到的 Uncaught TypeError: Cannot read property 'toggle' of undefined 意思很明确：你尝试调用.toggle()的那个变量是undefined——说白了就是你没成功获取到要加class3的那个div元素，大概率是DOM元素获取的代码写错了，或者执行时机不对。

解决步骤&修正代码

1. 先把DOM元素获取写对

你写的document.getEle...应该是拼写失误了，JavaScript里没有这个API，正确的获取方式有几种，比如：

用复合选择器精准定位那个同时有class1和class2的div：

// 获取目标div
const targetDiv = document.querySelector('.class1.class2');
// 获取那个带active状态的触发元素（假设它有个类叫trigger，你可以换成自己的选择器）
const triggerElement = document.querySelector('.trigger');

如果用getElementsByClassName的话，要注意它返回的是伪数组，得取索引才能拿到单个元素：

const targetDiv = document.getElementsByClassName('class1')[0];

2. 绑定触发逻辑

根据你说的“根据另一个元素的active状态切换class3”，分两种常见情况处理：

情况1：active是点击触发的（比如点击按钮加active）

直接监听点击事件，同步切换class3：

// 确保代码在DOM加载完成后执行，不然元素还没渲染出来会拿不到
document.addEventListener('DOMContentLoaded', () => {
  const triggerElement = document.querySelector('.trigger');
  const targetDiv = document.querySelector('.class1.class2');

  triggerElement.addEventListener('click', () => {
    // 切换触发元素的active（你说这个功能正常，也可以保留你自己的代码）
    triggerElement.classList.toggle('active');
    // 同步给目标div切换class3
    targetDiv.classList.toggle('class3');
  });
});

情况2：active是其他方式触发的（比如滚动、JS动态添加）

这种情况需要监听元素的class变化，用MutationObserver来实现：

document.addEventListener('DOMContentLoaded', () => {
  const triggerElement = document.querySelector('.trigger');
  const targetDiv = document.querySelector('.class1.class2');

  // 创建观察者，监听class属性变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        // 检查触发元素是否有active类
        const hasActive = triggerElement.classList.contains('active');
        // 对应切换class3
        if (hasActive) {
          targetDiv.classList.add('class3');
        } else {
          targetDiv.classList.remove('class3');
        }
      }
    });
  });

  // 启动观察者，监听触发元素的属性变化
  observer.observe(triggerElement, { attributes: true });
});

3. 避坑提醒

别写错DOM API：比如getElementById、querySelector这些拼写要准确，别漏字母
确保DOM加载完成再执行JS：要么把JS代码放在</body>标签前，要么用DOMContentLoaded包裹
选择器要准确：如果页面有多个class1的元素，要确保选到你要的那一个

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