如何创建一个页面元素高亮插件_JavaScript元素高亮插件开发与视觉引导教程

<font style="font-family:monospace;">
function highlight(element, options = {}) {
  const defaults = {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    borderRadius: '8px',
    onClose: null
  };
  const config = { ...defaults, ...options };

  // 创建遮罩层
  const overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = config.backgroundColor;
  overlay.style.zIndex = '9999';
  overlay.style.transition = 'opacity 0.3s';

  // 获取目标元素位置
  const rect = element.getBoundingClientRect();
  
  // 使用 clip-path 挖空高亮区域
  const clipPath = `
    polygon(
      0 0, 100% 0, 100% 100%, 0 100%,
      0 ${rect.top}px,
      ${rect.left + rect.width}px ${rect.top}px,
      ${rect.left + rect.width}px ${rect.top + rect.height}px,
      ${rect.left}px ${rect.top + rect.height}px,
      ${rect.left}px ${rect.top}px,
      0 ${rect.top}px
    )
  `;
  overlay.style.clipPath = clipPath;

  // 插入遮罩
  document.body.appendChild(overlay);

  // 点击遮罩关闭
  overlay.addEventListener('click', () => {
    overlay.style.opacity = '0';
    setTimeout(() => {
      document.body.removeChild(overlay);
      if (config.onClose) config.onClose();
    }, 300);
  });
}

<font style="font-family:monospace;">
const handleEsc = e => {
  if (e.key === 'Escape') {
    if (document.body.contains(overlay)) {
      document.body.removeChild(overlay);
      document.removeEventListener('keydown', handleEsc);
    }
  }
};
document.addEventListener('keydown', handleEsc);

<font style="font-family:monospace;">
class Highlighter {
  constructor(options) {
    this.config = { ...defaultOptions, ...options };
  }

  show(selector) {
    const element = typeof selector === 'string' 
      ? document.querySelector(selector) 
      : selector;
    if (!element) return;

    this.currentElement = element;
    this._createOverlay();
  }

  hide() {
    // 关闭逻辑
  }
}

// 使用方式
const h = new Highlighter({ backgroundColor: 'rgba(0,0,0,0.8)' });
h.show('#submit-btn');
</font>