html - 通过 JS 提示将自定义光标添加到 CSS 样式表

Question

我正在尝试制作自定义光标 setter 。您可以在 CSS 中自定义光标，所以我先去了那里。

html {
cursor: url(MY URL GOES HERE), auto !important;
}

此时它起作用了。但是，我希望普通用户能够输入图像 URL 并看到光标更改为该 URL。我决定使用 JavaScript 来做到这一点。

function customCursor() {
var v1 = prompt("Enter the image URL you want to be your mouse cursor.");
var style = document.createElement('style'); 
style.innerHTML = `html {cursor:url(` + v1 + `);  }  `; 
document.head.appendChild(style);
}

但是，它不起作用。我用 Firebug 检查了当前页面的 HTML，并添加了标签 。当我使用 JavaScript 手动添加它时，它起作用了。那么为什么它不起作用呢？
我还确保将我选择的图像保持在 128x128 以下。

Answer 1

对代码进行了大量更改后，它仍然无法正常工作。但是，我现在明白了原因(通过使用 devtools 来读取实际添加的内容):
它不是动态地使用我的变量，而是将变量名称视为 URL 本身。这使得这个问题几乎无关紧要。