How do you get computed cursor type in javascript?

Question

I want to change an element when the cursor changes its type, for instance when the cursor changes from pointer to a text (I-beam).

I have tried to use

document.addEventListener('mouseover', e => {
  const tgt = e.target;
  const computed = window.getComputedStyle(tgt)["cursor"]
  console.log("Computed: " + computed)
});

but this just logs "Computed: auto". I want the know the cursor type specifically. I don't know if this is possible?

Answer 1

我认为记录tgt.style.cursor应该可以解决问题。

Answer 2

first, you need to define cursor style for one of your elements like this:

<style>

#cur{
    cursor: pointer;
}

</style>

and then when mouseover on your element, it will change from auto to pionter

 <div id="cur">mouse over</div>

<script>


document.addEventListener('mouseover', e => {
  const tgt = e.target;
  const computed = window.getComputedStyle(tgt)["cursor"]
  
  
    if(computed !== "auto"){
        console.log(computed);
    }

});


</script>

Answer 3

• We are checking whether the cursor property is changing or not.
  
• hasCursorChange which is default false and we are setting it to true by making if condition false whenever cursor changes.
• Just for the visual understanding I am adding change class and applying CSS for background-color so you can have better idea of it.
• You can play with if condition or adding event listener for any other elements or child, this on will work for every element of DOM .

 document.addEventListener( "mouseover", function(e) { var hasCusrorChnaged = false; var cursor = e.target.style.cursor; if (cursor != "") { if (!hasCusrorChnaged) { e.target.classList.add("change"); } } }, false );

 .change { background-color: #ff0000; }

 <h1>Mouse over the words to change the cursor.</h1> <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>