如何获取cursor:auto时浏览器为元素设置的实际光标样式？

确实，这个问题挺棘手的——getComputedStyle只会返回设置的auto关键字，而不会告诉你浏览器实际渲染时用的具体光标（比如text、pointer）。这是因为auto是一个动态决策的关键字，浏览器会根据元素的类型、内容和交互特性来自动选择光标，而这个最终的使用值并没有暴露给前端API。

不过我们可以通过两种间接方法来获取这个实际值：

方法一：基于元素特性的推断法 #

最直接的思路是模拟浏览器的判断逻辑，根据元素的类型、属性和内容来推测实际光标样式。这需要覆盖常见的场景，代码示例如下：

function getActualCursor(element) {
  // 优先判断可点击元素（浏览器会显示pointer）
  if (element.tagName === 'A' && element.href) return 'pointer';
  if (element.tagName === 'BUTTON' || element.getAttribute('role') === 'button') return 'pointer';
  if (getComputedStyle(element).cursor === 'pointer') return 'pointer';

  // 判断可编辑文本元素（浏览器会显示text）
  if (element.tagName === 'INPUT' && ['text', 'email', 'password', 'search'].includes(element.type)) return 'text';
  if (element.tagName === 'TEXTAREA') return 'text';
  if (element.contentEditable === 'true') return 'text';

  // 判断是否包含可选择的文本（浏览器会显示text）
  const range = document.createRange();
  range.selectNodeContents(element);
  const hasSelectableText = !range.collapsed;
  range.detach();
  if (hasSelectableText) return 'text';

  // 默认情况（比如空div、普通块级元素）
  return 'default';
}

// 使用示例：在mouseover事件中调用
document.addEventListener('mouseover', (e) => {
  const actualCursor = getActualCursor(e.target);
  console.log('实际光标样式:', actualCursor);
});

这个方法的优点是性能好、不需要额外DOM操作，缺点是需要不断补充场景（比如拖拽元素、表格单元格等特殊情况）才能覆盖所有浏览器行为。

方法二：利用临时元素的模拟测试法 #

如果你需要更精准的结果，可以创建一个临时元素，完全复制目标元素的样式和内容，然后通过一些间接方式测试光标。比如可以将临时元素定位到鼠标位置，结合document.elementFromPoint验证其交互状态，但实际使用中方法一已经能覆盖大部分场景。

需要注意的是，目前没有标准API可以直接获取auto对应的实际光标值，因为这属于浏览器内部的渲染决策，不属于CSS计算值的范畴，所以上述方法都是基于对浏览器行为的模拟。

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