Javascript-firefox：如何从本地png文件设置自定义光标？

问题描述

如何从本地映像文件为当前页面设置自定义光标？基本上我需要使用javascript以编程方式更改为不同的光标，但光标存储在本地硬盘上。

how do you set a custom cursor for the current page from a local image file? basically I need to change to a different cursor programmatically using javascript, but the cursor is stored locally on my hard drive.

推荐答案

不能（但请参阅下文），因为 file：// 无法从其他协议访问或引用。

You can't (but see below), because the file:// cannot be accessed or referred from other protocols.

element.style.cursor = "url(...location-of-pic...), auto";
//                                                ^^^^^^ (required as fallback)

$ b b

1. 您可以，并使用它代替 file：//..../cursor.png ：

document.documentElement.style.cursor = 'url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAABMLAAATCwAAAAAAAAAAAAAAAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAbGxt/2xsbf8AAAAAbGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf8AAAAAbGxt/2xsbf8AAAAAAAAAAGxsbf9sbG3/AAAAAGxsbf9sbG3/bGxt/2xsbf9sbG3/bGxt/2xsbf9sbG3/AAAAAGxsbf9sbG3/AAAAAAAAAABsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAAAAAAAAVHibFE94oDxKeKRkRHiqkUx4ohlsbG3/bGxt/wAAAAAAAAAAAAAAAAAAAABLeKMPPHixUj54sIQ+eLC5Pniw3j54sP8/eK//QXet/0J2q/9Ed6k+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPXiwKkF4rf9BeK3/QXit/0J3q+xFdqnAQ3erhTt7s1Qqg8VSFY3cWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD94rwlCeKxzRHaqUUR2qis7e7MIAAAAABiM2QwJk+hyA5fv4gKX7v8AmfIbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACZPoGQOX7oIDlu7tBZXs/wSX6+wJkeqCHXjmTiBy6QIAAAAAAAAAAAAAAAAAAAAAAAAAAA+R4QICl+4kA5fuhgWW7PMGlev/BpXr6wSY64MNjOkQJ23lTC9j5PwuZOSBAAAAAAAAAAAAAAAAAAAAAAAAAAAElu0JBpXr1QaV6/8GlevpBpbrfASY6xcAAAAAK2fkNi5k5PgsZuT4LGbkRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaV62wGlet+BZbrFQAAAAAAAAAALWTkIi1l5OUsZuT/LGbkWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkDyxl5MssZuT/LGbkewAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmPkAixm5K0sZuT/LGbkoQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALmTkAixm5JMsZuT/LGbkwCxm5AcAAAAAAAAAAAAAAAAAAAAAgAEAAIAB8L+f+QAAkAkAAJAJAACfAQAA4AcAAOAHAADggwAA/gEAAPABAADwIQAA+MP///+H////DwAA/g8AAA%3D%3D"), auto';

您可以将任何文件上传并转换为base-64格式。修剪空格，并加上 data：image / png; base64，。

You can upload and convert any file to base-64 format at this page. Trim the whitespace, and prefix

-URIs，图像也可以上传到文件主机，嵌入如下：

Instead of using data-URIs, an image can also be uploaded to a file host, and embedded as follows:

document.documentElement.style.cursor = 'url("http://sstatic.net/stackoverflow/img/favicon.ico"), auto';

另请参阅：

• MDN：


• MDN：的使用游标属性的URL值

• MDN: CSS cursor property
• MDN: Using URL values for the cursor property

这篇关于Javascript-firefox：如何从本地png文件设置自定义光标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！