当<a>超过div-element时，在菜单中激活div

<div id="menu">
  <a href="#">超过div-element的内容</a>
  <div id="div-element">需要激活的div</div>
</div>

#menu {
  display: flex;
  align-items: center;
}

#div-element {
  /* 默认样式 */
}

#div-element.active {
  /* 激活样式 */
}

const aElement = document.querySelector('a');
const divElement = document.querySelector('#div-element');

function checkWidth() {
  if (aElement.offsetWidth > divElement.offsetWidth) {
    divElement.classList.add('active');
  } else {
    divElement.classList.remove('active');
  }
}

// 监听窗口大小变化
window.addEventListener('resize', checkWidth);

// 页面加载完成后检查一次宽度
window.addEventListener('load', checkWidth);