如何使用javascript从浏览器获取当前光标样式答案

【问题标题】：how to use javascript get current cursor style from browser如何使用javascript从浏览器获取当前光标样式
【发布时间】：2016-08-04 08:36:00
【问题描述】：

我正在使用 selenium 来自动化测试浏览器应用程序，我需要一个 javascript api 来获取浏览器当前的光标样式，而不关心它在哪里。是否有一些API获取信息链接document.readstate

【问题讨论】：

detect cursor type的可能重复
@RobinDorbell 我认为这个问题并不是真正的重复，因为 OP 询问（不关心它在哪里），而不是问题 stackoverflow.com/questions/5304668/detect-cursor-type 专门检查输入标签的光标输入，它使用 selectionStart 和 selectionEnd ，据我了解，关于 OP 的问题更通用，不限于输入标签检测。

标签： javascript

【解决方案1】：

由于它可能没有被内联定义，你需要计算样式：

注意：未检测到伪类的光标更改

document.addEventListener('click', e => {
  const tgt = e.target;
  const inline = tgt.style.cursor || "Not defined"
  const computed = window.getComputedStyle(tgt)["cursor"]
  console.log("Inline: ", inline, "Computed: ", computed)
});

.help {
  cursor: help
}

.pseudo::before {
  cursor: crosshair;
  background: #fff;
  content: "X";
}

<span style="cursor:pointer">Inline Pointer</span>
<hr>
<span class="help">CSS help</span>
<hr/>
<span class="pseudo"><<< Changed by pseudo class not detected</span>

【讨论】：

说有人提出另一个类似的问题，@mplungjan 会回答这个问题。
哦，他回答了here

【解决方案2】：

以下脚本检测并打印页面上任何元素上的光标样式浏览器。

document.addEventListener('mouseover',function(e){
    var cursor = e.target.style.cursor;
    console.log(cursor);
},false);

span.crosshair {
    cursor: crosshair;
}

span.help {
    cursor: help;
}

span.wait {
    cursor: wait;
}

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:grab">grab</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
<span style="cursor:not-allowed">not-allowed</span><br>
<span style="cursor:no-drop">no-drop</span><br>

【讨论】：

如果当前光标是通过::before & ::after 伪元素修改的，这不起作用。