Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine an element's custom CSS cursor hotspot coordinates from JavaScript

When I attempt to get the full CSS cursor definition of an HTML element in JavaScript, it omits the hotspot (target pixel) coordinates for some reason and is resulting in my cursor resetting its hotspot to the top-left pixel of the cursor image (i.e. not a good thing).

Problem demonstrated in this JSFiddle.

Update: It appears to only be this way in some browsers, specifically (in my tests) Mac Chrome and Safari.

Update 2: Looks like this is actually fixed in the latest nightly build of WebKit (8536.26.17, 537+), so I guess there's no real answer required besides it's a bug, and has already been fixed.

For example:

var elem = document.createElement("div");
elem.style.cursor = "url('path/to/cursor') 9 9, auto";
console.log( elem.style.cursor );

Outputs:

url(path/to/cursor), auto

Is there any way to get those coordinates from the style once they've been set?? I tried window.getComputedStyle() but it has the same result.

This seems like a pretty major oversight to me. Is that information just lost and no longer retrievable?

like image 367
devios1 Avatar asked Feb 19 '13 19:02

devios1


Video Answer


1 Answers

As far as I can tell from looking at the CSS 2.1 Specification, the X and Y coordinates are not included:

http://www.w3.org/TR/CSS21/ui.html#cursor-props

Also, the Mozilla Developer Network lists the X,Y coordinates as "experimental."

If something isn't in the specification then you can expect browsers to have different, and sometimes conflicting, implementations of the property.

like image 103
Alex W Avatar answered Oct 12 '22 12:10

Alex W