如何将与Lightbox2冲突的jQuery Color高亮代码转为原生JavaScript？

转换后的完整代码 #

function highlight(elemId) {
  const elem = document.querySelector(elemId);
  if (!elem) return; // 避免找不到元素时报错

  // Safari兼容hack：先强制设置白色背景
  elem.style.backgroundColor = '#ffffff';
  // 触发浏览器重绘，确保Safari能识别后续过渡效果
  void elem.offsetWidth;

  // 立刻切换到高亮背景色（过渡时长设为0，实现瞬间切换）
  elem.style.transition = 'background-color 0s';
  elem.style.backgroundColor = '#ffffaa';

  // 1秒后开始过渡回白色，过渡时长3秒
  setTimeout(() => {
    elem.style.transition = 'background-color 3s';
    elem.style.backgroundColor = '#ffffff';
  }, 1000);
}

// 页面加载时，若URL带有hash则高亮对应元素
if (window.location.hash) {
  highlight(window.location.hash);
}

// 监听所有含#的链接点击事件
document.querySelectorAll('a[href*="#"]').forEach(link => {
  link.addEventListener('click', () => {
    const hrefParts = link.getAttribute('href').split('#');
    if (hrefParts.length < 2) return;
    const elemId = `#${hrefParts[1]}`;
    
    // 修正原代码的requestAnimationFrame用法：确保回调触发高亮
    requestAnimationFrame(() => {
      highlight(elemId);
    });
  });
});

核心转换说明 #

• 元素选择：用原生document.querySelector()替代jQuery选择器，同时增加元素存在性校验，避免无匹配元素时报错。
• 动画实现：抛弃jQuery Color的animate方法，改用CSS transition属性实现背景色过渡——这是原生处理样式动画的标准方案，性能更优且无需依赖第三方库。
• Safari兼容：保留原代码的白色背景初始化逻辑，新增void elem.offsetWidth触发浏览器重绘，确保Safari能正确识别后续的过渡状态变化。
• 事件绑定：用document.querySelectorAll()批量选择目标链接，再通过addEventListener绑定点击事件，替代jQuery的事件委托写法。
• 修复潜在问题：原代码中requestAnimationFrame(highlight(elemId))会直接执行函数，转换后改为在回调中调用highlight，符合API的正确用法。

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